jQuery 复选框，如何获取所有已选中的复选框并将它们添加到数组中？

Question

您好，我有以下页面：

<input type="checkbox"  name="fruit1" id="1"  class="box">Banana<br /><br />
<input type="checkbox"  name="fruit2" id="2"  class="box">Cherry<br /><br />
<input type="checkbox"  name="fruit3" id="3"  class="box">Strawberry<br /><br />
<input type="checkbox"  name="fruit4" id="4"  class="box">Orange<br /><br />
<input type="checkbox"  name="fruit5" id="5"  class="box">Peach<br /><br />
<input type="button" id="groupdelete" value="clickme"><br />

 $(document).ready(function(){

$('#groupdelete').on('click', function(){
  var names = [];
   $('input:checked').each(function() {

       names.push($('input:checked').attr("name") + $('input:checked').attr('id'));

 });
   console.log(names); 
})

})

我想要做的是：

将选中的复选框添加到数组中。之后，我希望能够将值传递到php变量中。

现在执行代码时，我得到了这样的结果：

["fruit22", "fruit22", "fruit22"]

非常感谢您的帮助。

敬礼，Zoreli

- Zoran

Answer 1

你需要在.each()函数中使用this而不是'input:checked'来引用正在检查的集合中的当前元素。如果你重复使用选择器，那么你会再次获取该集合，然后只从该集合中的第一个元素获取属性。

$('input:checked').each(function() {
    names.push($(this).attr("name") + this.id);
});

- Anthony Grist

---

太棒了，运行得很好...你能告诉我如何将这个名字数组传递给 PHP 变量吗？ - Zoran

他也可以使用 this.name 而不是将 this 强制转换回 jQuery 对象。自 jQuery 1.7+ 版本以来，prop 更受青睐而不是 attr。 - mrtsherman

如何将名称的值传递给PHP变量？有什么想法吗？ - Zoran

将“names”放入隐藏输入字段的值中，然后在表单提交时从PHP中读取。 - Matt Cofer

Answer 2

将你的HTML更改为

<input type="checkbox"  name="fruits[]" id="1"  class="box">Banana<br /><br />
<input type="checkbox"  name="fruits[]" id="2"  class="box">Cherry<br /><br />
<input type="checkbox"  name="fruits[]" id="3"  class="box">Strawberry<br /><br />
<input type="checkbox"  name="fruits[]" id="4"  class="box">Orange<br /><br />
<input type="checkbox"  name="fruits[]" id="5"  class="box">Peach<br /><br />
<input type="button" id="groupdelete" value="clickme"><br />

现在，看看jQuery/Javascript

$(document).ready(function(){
    $('#groupdelete').click(function() {
        var marked = new Array();
        var k = 0;
        $('input:checked').each(function(index,value) {
            marked[k] = value;
            k++;
        });        
        alert(marked[0].id);
    });
});

alert 只是通过访问数组索引的直接访问来向您演示。

- Hamza Waqas