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


231

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

Answers:


434

先前的两个答案的组合:

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

10
另一个组合:var selected = $('#checkboxes input:checked')。map(function(i,el){return el.name;})。get(); //添加.join(';')以获取组合的字符串
roberkules 2011年

1
@Alex LE。如何仅获取所选复选框的计数?我只需要检查div内的任何复选框是否已选中。
ashishjmeshram'5

1
@Ashish。只需写:var count = $('#checkboxes input:checked')。length;
Alex LE

2
不必要的构造函数调用var selected = new Array();。更好(更便宜)var selected = [];
Pono 2014年

如何获得change功能?
Si8

54

这样可以吗?

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

9
$(this).checked不起作用。使用if($(this).attr('checked'))或if($(this).is(':checked'))
Stefan Steiger 2013年

如果.attr('checked')还是.prop('checked').is(':checked')不工作,尝试.get(0).checked
EMFI

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

将为您提供一系列元素本身。如果您只需要名称:

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

2
我认为应该返回this.name或返回$(this).attr('name');
Jansen Price,2010年

4
$("#checkboxes :checked").map(...)会更加简洁。正如Jansen所指出的,应该是$(this).attr("name"); 但我会考虑一个简单的示例this.name,它应该是兼容的。
Alex Barrett 2010年

1
这对于简单的地图非常有用。我更改childrenfind看起来更深,并且需要使用jquery属性$(this) (并在我再次查看时写了此注释……)
goodeye

24

我需要所有选中的复选框的计数。我没有写一个循环我这样做

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

将其与复选框总数进行比较以查看它们是否相等。希望对别人有帮助


9

这对我有用。

var selecteditems = [];

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

6

您也可以给它们取相同的名称,使它们成为一个数组,但给它们不同的

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

然后,您可以使用map仅获取已打勾的值:

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

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>

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

该解决方案的优势是什么?
Luis Gouveia
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.