使用javascript将复选框值添加到链接

Question

我想将选中的复选框值作为URL参数添加到我的链接。 这是我在其他之中：

<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>