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