Jquery：获取复选框值并将它们用作 URL 参数答案

【问题标题】：Jquery: getting checkbox values and using them as URL parametersJquery：获取复选框值并将它们用作 URL 参数
【发布时间】：2017-09-04 19:11:57
【问题描述】：

我有一个带有复选框列的表，每个复选框都有一个唯一值。可以单击任何和所有复选框。

单击按钮时，我想将这些值连接到一个 URL 字符串，然后我将在 ajax 调用中使用该字符串。

<input type="checkbox" name="product[]" value="256">
<input type="checkbox" name="product[]" value="317">
<input type="checkbox" name="product[]" value="9985">
<input type="checkbox" name="product[]" value="3751">

这就是我希望 URL 结束的方式：

http://example.com/data?pid=[checkbox value 1]&pid=[checkbox value 2]&pid=[checkbox value 3]

等等。

【问题讨论】：

标签： jquery url checkbox

【解决方案1】：

这里有解决方案https://jsfiddle.net/15Lx3gvv/

var url = 'http://example.com/data';
$('button').click(function(){
  var first = 0;
  $('input[name="product[]"]').each(function(i){
    if( $(this).is(':checked')){
      url += ((first == 0) ? "?" : "&") + 'pid=' + $(this).attr('value');
      first = 1;
    }	
  });
  console.log(url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product[]" value="256">
<input type="checkbox" name="product[]" value="317">
<input type="checkbox" name="product[]" value="9985">
<input type="checkbox" name="product[]" value="3751">

<br/>

<button>
Submit
</button>

无论checkbox 是checked，只有那些值将附加到url。

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

你可以这样做：

    $(function () {
        var qs = '';
        $('[name="product[]"]').is(':checked').each(function(index, element) {
            qs += "pid=" + element.value + "&";
        });

        console.log(qs);
    });

发布一个对象会更好，但如果这是您的要求，这应该可以。如果你愿意，你可以修剪最后的 &。

这将是一个将数据发布为数组的更好解决方案：

     $(function() {
        var data = [];
        $('[name="product[]"]').is(':checked').each(function(index, element) {
            data.push(element.value);
        });

        console.log(data);

        $.ajax({
            type: "POST",
            url: 'your url',
            data: data,
            success: success,
        });
    });
    function success() {

    }

【讨论】：