使用jQuery获取div中选中复选框的列表答案

【问题标题】：Get a list of checked checkboxes in a div using jQuery使用jQuery获取div中选中复选框的列表
【发布时间】：2011-01-10 11:14:40
【问题描述】：

我想获取在具有特定 id 的 div 中选择的复选框名称列表。我将如何使用 jQuery 来做到这一点？

例如，对于这个 div，我想获取数组 ["c_n_0"; "c_n_3"] 或字符串 "c_n_0;c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

【问题讨论】：

标签： jquery checkbox jquery-selectors

【解决方案1】：

结合前面两个答案：

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

【讨论】：

和另一个组合： var selected = $('#checkboxes input:checked').map(function(i,el){return el.name;}).get(); // 添加 .join(';') 以获得组合字符串
@Alex LE。我如何仅获取所选复选框的计数？我只需要检查是否选中了 div 内的任何复选框。
@Ashish。只需写： var count = $('#checkboxes input:checked').length;
构造函数var selected = new Array();的不必要调用。更好（更便宜）var selected = [];
如何在change函数上获取它？

【解决方案2】：

这样可以吗？

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

【讨论】：

$(this).checked 不起作用。使用 if ($(this).attr('checked')) 或 if ($(this).is(':checked'))
如果.attr('checked') 或.prop('checked') 或.is(':checked') 不起作用，请尝试.get(0).checked

【解决方案3】：

$("#checkboxes").children("input:checked")

会给你一个元素本身的数组。如果您只是特别需要名称：

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

【讨论】：

我认为应该是 return this.name 或 return $(this).attr('name');
$("#checkboxes :checked").map(...) 会更简洁。正如詹森指出的那样，应该是$(this).attr("name")；但我会考虑一个简单的this.name，它应该同样兼容。
这对于简单的地图来说非常棒。我将children 更改为find 以更深入地查看，并且需要jquery 属性，因此使用了$(this)（并在我再次查看时写了此评论......）
嘿，我又来找了，找到了！（我知道，这不是一个很有用的评论，但我无法抗拒。）

【解决方案4】：

我需要计算所有选中复选框的数量。我没有写一个循环，而是这样做了

$(".myCheckBoxClass:checked").length;

将其与复选框的总数进行比较，看看它们是否相等。希望它会帮助某人

【讨论】：

【解决方案5】：

这对我有用。

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

【讨论】：

很高兴您没有在each 函数中使用this。

【解决方案6】：

您也可以给它们都赋予相同的名称so they are an array，但赋予它们不同的值：

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

然后你就可以只得到被勾选的using map的值：

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

【讨论】：

【解决方案7】：

如果您需要获取选中复选框的数量：

var selected = []; // initialize array
    $('div#checkboxes input[type=checkbox]').each(function() {
       if ($(this).is(":checked")) {
           selected.push($(this));
       }
    });
var selectedQuantity = selected.length;

【讨论】：

【解决方案8】：

 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

【讨论】：

这个方案有什么好处？

【解决方案9】：

function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);

     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

【讨论】：