は、私は私のリンクにURLパラメータとして確認し、チェックボックスの値を追加したいのjavascript

Question

を使用してリンクの横にあるチェックボックスの値を追加します。

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label> 
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label> 

<script> 
    $(".checkbox").on("change", function() { 
     var values = []; 
     $('.checkbox:checked').each(function() { 
      var result = $(this).val(); 
      values.push(result); 
     }); 
     var key = $(".link").html(values.join("&")); 
     document.write('<a href="http://www.example.com/test.html?' + key + '">Open here</a>'); 
    }); 
</script> 

期待される結果が「http://www.example.com/test.html?bx1=1&bx2=1」です： これは私が他の人の間で持っているものです。 誰かがこれを手伝ってくれることを願っています。これらの行のための

ありがとう：

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label> 
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label> 
<a class="link" href="http://www.example.com/test.html">Open here</a> 

<script> 
    $(".checkbox").on("change", function() { 
     console.log('fzef'); 
     var values = []; 
     $('.checkbox:checked').each(function() { 
      var result = $(this).val(); 
      values.push(result); 
     }); 
     $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&")); 
    }); 

    // Init link on page load 
    $(".checkbox").trigger("change"); 
</script> 

私は私の値の間&on&を取得し、それはIE上では動作しません。何か案が？ありがとう！

Answer 1

で必要があります。

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label> 
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label> 
<a class="link" href="http://www.example.com/test.html">Open here</a> 

<script> 
    $(".checkbox").on("change", function() {console.log('fzef'); 
     var values = []; 
     $('.checkbox:checked').each(function() { 
      var result = $(this).val(); 
      values.push(result); 
     }); 
     $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&")); 
    }); 

    // Init link on page load 
    $(".checkbox").trigger("change"); 
</script> 

Answer 2

は次のようにしてみてください： あなたは、このように行うことができますdocument.write()

document.write('<a href="http://www.example.com/test.html?' + values.join('&') + '">http://www.example.com/test.html?' + values.join('&')+'</a>'); 

OR

$("button").on("click", function() { 
 
     var values = []; 
 
     $('.checkbox:checked').each(function() { 
 
      var result = $(this).val(); 
 
      values.push(result); 
 
     }); 
 
    
 
    
 
    
 
    $('#url').attr('href','http://www.example.com/test.html?' + values.join('&')); 
 
    $('#url').html('http://www.example.com/test.html?' + values.join('&')) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label> 
 
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label> 
 
<button >Go</button> 
 
<a id="url"></a>

Answer 3

あなたがする必要がある補正は、ライン
var key = $(".link").html(values.join("&"));

にあなたは
var key = values.join("&");

なぜにそれを変更する必要がありますか？
あなたのコードには.linkセレクタはありませんので。

Answer 4

、フォーム内のチェックボックスをラップそれらに名前を与えるとjQueryが.serialize()で仕事をしてみましょう：

$(function() { 
 
    $("form").on("change", function() { 
 
    var href = "http://www.example.com/test.html", 
 
     params = $(this).serialize(); 
 

 
    if (params.length > 0) { 
 
     href += "?" + params; 
 
    } 
 

 
    console.log(href); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1 
 
    <input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2 
 
</form>