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

Posted 2023-02-22

【中文标题】使用jquery获取具有特定类名的所有选中复选框

【英文标题】：Using jquery to get all checked checkboxes with a certain class name

【发布时间】：2011-07-23 22:25:38

【问题描述】：

我知道我可以使用这个来获得页面上所有选中的复选框：

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

但我现在在一个页面上使用它，该页面有一些我不想包含的其他复选框。我如何将上面的代码更改为仅查看具有特定类的选中复选框？

【问题讨论】：

我应该将标题更新为 class 而不是 name？

@Russ Cam - 已经完成

$('input[type=checkbox]:checked') 也可以。

【参考方案1】：

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

【讨论】：

不错。此外， $('.theClass:checkbox:not(:checked)') 将获得所有未选中的。

我可以对所有带有名称的复选框执行此操作吗？

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

@FluffyBeing 是的，要按名称获取输入，您可以使用：$('input[name="input_name"]:checked') 或 $('input[name="input_name"]').filter(':checked')

【参考方案2】：

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

An example 进行演示。

:checkbox 是复选框的选择器（实际上，您可以省略选择器的 input 部分，尽管我发现在早期版本的库中执行此操作会得到奇怪结果的小众案例。我是确保它们在以后的版本中得到修复）。 .class 是包含class 的元素类属性的选择器。

【讨论】：

关于 :checkbox 的 Jquery 注释建议坚持使用 [type="checkbox"]。 $('[type="checkbox"].class')....或 $('input[type="checkbox"].class')

@TSmith 你有参考吗？

我从这里读到：api.jquery.com/checkbox-selector ...在“附加说明”下

【参考方案3】：

必填.map 示例：

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

【讨论】：

$('input.theClass:checked').map(function() return this.value).get().join(',');

@Fedir: 你的命令会给出on,on 作为结果（“打开”每个选中的复选框）

@Jay 您需要设置复选框的值属性以在逗号分隔的字符串中获取它们的值

【参考方案4】：

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

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

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

【讨论】：

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

谢谢 :) 我需要找到所有选中的复选框，而您的答案就是这样。

【参考方案5】：

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

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

【参考方案6】：

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

【参考方案7】：

我不确定它是否对您的特定情况有帮助，并且我不确定在您的情况下，您只想包含的复选框是否都是单个表单或 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() : "");
);

【参考方案8】：

你可以使用这样的东西： 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。

【讨论】：

这是最好的答案。

【参考方案9】：

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

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

)();

console.log(valores);

【参考方案10】：

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

见jQuery class selectors。

【参考方案11】：

你可以这样试试

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

【参考方案12】：

<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

【参考方案13】：

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

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

参考： Easiest "Check All" with jQuery

【参考方案14】：

HTML

 <p> <input type="checkbox" name="fruits" id="fruits"  value="1" /> Apple </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="2" /> Banana </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="3" /> Mango </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="4" /> Grape </p>

jQuery

用于存储选择的水果值定义数组。

 fruitArray = [];

$.each 将迭代选中的复选框并推入数组。

 $.each($("input[name='fruits']:checked"), function (K, V)     
    fruitArray.push(V.value);        
);

                                       

【参考方案15】：

$(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');
        
    );
);

【讨论】：

请考虑添加评论来解释您的答案，以便初学者更容易理解

【参考方案16】：

通过类名获取选中复选框的ID的简单方法：

$(".yourClassName:checkbox:checked").each(function() 
     console.log($(this).attr("id"));
);

【参考方案17】：

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

【讨论】：

请解释一下这段代码的全部内容。这将有助于其他人理解