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


215

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

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

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


我应该更新标题class而不是说name吗?
Russ Cam

@Russ Cam-已经完成
leora

$('input [type = checkbox] :checked')也可以使用。
超级酷

Answers:


392

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


8
真好 同样,$('。theClass:checkbox:not(:checked)')将获得所有未选中的内容。
Venugopal M

我可以对所有带有名称的复选框执行此操作吗?
FluffyBeing '19

如何在选中的元素上添加另一个类?我想在选中的输入元素上显示边框。
Najam Us Saqib

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

一个例子来说明。

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


9
:checkbox上的jQuery注释建议坚持使用[type =“ checkbox”]。$('[type =“ checkbox”]。class')....或$('input [type =“ checkbox”]。class')
TSmith 2013年

@TSmith有参考吗?
Russ Cam

9
我从这里阅读:api.jquery.com/checkbox-selector ...在“其他说明”下
TSmith,2013年

72

强制性.map示例:

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

3
$('input.theClass:checked')。map(function(){return this.value})。get()。join(',');
Fedir RYKHTIK

@Fedir:您的命令给出on,on结果(选中的每个复选框均“打开”)
Jay

@Jay您需要设置复选框的value属性以逗号分隔的字符串形式获取它们的值
Kamran Ali

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

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

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

如果需要将值存储在数组中,则.map可能是一个更令人愉快的选择,如karim79的答案所示。
duplode 2013年

1
谢谢:)我需要找到所有选中的复选框,而您的答案就可以了。
ufk 2014年


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

8

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

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

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

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


7

您可以使用如下代码:
HTML:

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


jQuery的:

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


它将选择值1和3。


这是最好的答案。
Marcos Buarque

7

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

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

})();

console.log(valores);


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

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


3

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

HTML:

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

jQuery的:

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

参考: 使用jQuery最简单的“全部检查”


1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});

请考虑添加评论以解释您的答案,以便对不
熟悉

-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()

1
请解释这段代码的全部含义。它将帮助其他人理解
Shafin Mahmud
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.