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

Juo*_*nis 222 checkbox jquery 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>
Run Code Online (Sandbox Code Playgroud)

Ale*_* LE 420

结合前两个答案:

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

  • 和另一个组合:var selected = $('#checkboxes input:checked').map(function(i,el){return el.name;}).get(); //添加.join(';')来获取组合字符串 (10认同)
  • @亚历克斯乐。我如何只获得所选复选框的数量?我只需要检查是否选中了 div 中的任何复选框。 (2认同)
  • @阿什。只需写: var count = $('#checkboxes input:checked').length; (2认同)
  • 不必要的构造函数调用`var selected = new Array();`.使用`var selected = [];`更好(更便宜) (2认同)

nik*_*org 52

这会吗?

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

  • $(this).checked不起作用.使用if($(this).attr('checked'))或if($(this).is(':checked')) (9认同)
  • 如果 `.attr('checked')` 或 `.prop('checked')` 或 `.is(':checked')` 不起作用,请尝试 `.get(0).checked` (3认同)

Cor*_*rey 36

$("#checkboxes").children("input:checked")
Run Code Online (Sandbox Code Playgroud)

将为您提供一系列元素.如果你只是特别需要这些名字:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});
Run Code Online (Sandbox Code Playgroud)

  • `$("#checkboxes:checked").map(...)`会更简洁.正如Jansen指出的那样,它应该是`$(this).attr("name")`; 但我会考虑一个简单的`this.name`,它应该兼容. (4认同)
  • 我认为应该返回this.name或返回$(this).attr('name'); (2认同)

Usm*_*kat 22

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

$(".myCheckBoxClass:checked").length;
Run Code Online (Sandbox Code Playgroud)

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


小智 8

这适合我.

var selecteditems = [];

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


Sha*_*rpC 5

您也可以给它们所有相同的名称,因此它们是一个数组,但给它们不同的:

<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>
Run Code Online (Sandbox Code Playgroud)

然后,您只能使用map获取仅勾选的值的值:

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


Nes*_*sto 5

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

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