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

时间:2010-01-28 15:29:02

标签: jquery checkbox jquery-selectors

我想获得在具有特定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>

9 个答案:

答案 0 :(得分:399)

前两个答案的组合:

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

答案 1 :(得分:48)

这会吗?

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

答案 2 :(得分:36)

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

将为您提供一系列元素。如果您只是特别需要名称:

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

答案 3 :(得分:19)

我需要检查所有复选框的计数。而不是写一个循环,我做了这个

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

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

答案 4 :(得分:7)

这适合我。

var selecteditems = [];

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

答案 5 :(得分:5)

你也可以给他们所有相同的名字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()

答案 6 :(得分:0)

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>

答案 7 :(得分:0)

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

答案 8 :(得分:0)

如果您需要获取所选复选框的数量:

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