使用jquery获取具有特定类名的所有选中的复选框

问题描述 投票:202回答:14

我知道我可以使用以下方法在页面上选中所有复选框:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

但是我现在在一个页面上使用了此页面,该页面上还有其他我不想包括的复选框。我如何更改上面的代码,以仅查看上面具有特定类的已选中复选框?

jquery jquery-selectors checkbox
14个回答
362
投票

[$('.theClass:checkbox:checked')将为您提供所有类别为theClass的复选框。


5
投票

您可以使用类似以下的内容:HTML:

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

JQuery:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>

它将选择值1和3。


5
投票

您可以尝试这样

$(".yourClass:checkbox").filter(":checked")

4
投票
let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

<input type="checkbox" id="Checkbox1" class = "chk" value = "1" /> <input type="checkbox" id="Checkbox2" class = "chk" value = "2" /> <input type="checkbox" id="Checkbox3" class = "chk" value = "3" /> <input type="checkbox" id="Checkbox4" class = "chk" value = "4" /> <input type="button" id="demo" value = "Demo" /> <script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $("#demo").live("click", function () { $("input:checkbox[class=chk]:checked").each(function () { alert("Id: " + $(this).attr("id") + " Value: " + $(this).val()); }); }); </script>


3
投票

我知道这个问题已经有了很多很好的答案,但是我在浏览时发现了这个问题,并且发现它真的很容易使用。以为我会与其他任何人分享。

HTML:

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx

jQuery:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

参考:$(function () { $('.checkall').on('click', function () { $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); }); });



115
投票
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

An example进行演示。

:checkbox是复选框的选择器(实际上,您可以省略选择器的input部分,尽管我发现在某些情况下,在早期版本的库中这样做会得到奇怪的结果。我敢肯定它们已在更高版本中修复)。.class是包含class的元素类属性的选择器。


70
投票

强制.map示例:

.map

19
投票
var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

这将获得类名称为“ yourClass”的所有复选框。我喜欢这个示例,因为它使用jQuery选择器checked而不是进行条件检查。我个人也将使用数组存储值,然后根据需要使用它们,例如:

$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

12
投票

如果需要获取所有选中的复选框的值作为数组:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

9
投票
let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()

7
投票
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });

请参见 $('input.myclass[type=checkbox]').each(function () { var sThisVal = (this.checked ? $(this).val() : ""); });


7
投票

我不确定这是否对您的特定情况有所帮助,也不确定您要包括的复选框是否仅属于单个表单,div或表的一部分,但是您始终可以选择特定元素内的所有复选框。例如:

jQuery class selectors

然后,使用下面的jQuery,它只通过id =“ selective”的UL中的复选框:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

7
投票

将所有值放入数组的简单方法

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});
© www.soinside.com 2019 - 2024. All rights reserved.