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

Question

我知道可以使用以下代码获取页面上的所有被选中的复选框：

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

但是我现在将其用于一个包含其他复选框的页面，我不想将它们全部包括在内。如何修改上述代码只查看具有特定类别的已选复选框？

- leora

---

我应该将标题更新为“class”而不是“name”吗？ - Russ Cam

@Russ Cam - 已完成 - leora

$('input[type=checkbox]:checked') 也可以工作。 - super cool

Answer 1

$('.theClass:checkbox:checked') 会返回所有具有类名为 theClass 且被选中的复选框。

- Cokegod

---

好的。此外，$('.theClass:checkbox:not(:checked)')将获取所有未选中的复选框。 - Venugopal M

我可以针对所有名称为复选框执行此操作吗？ - FluffyBeing

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

@FluffyBeing 是的，要通过名称获取输入，您可以使用：$（'input[name="input_name"]:checked'）或$（'input[name="input_name"]'）.filter（'：checked'）。 - boryn

Answer 2

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

这里提供一个示例以进行演示。

:checkbox是选择复选框的选择器（事实上，你可以省略选择器中的部分，尽管我发现在库的早期版本中这样做会导致奇怪的结果。 我相信在后来的版本中已经修复了这些问题）。 .class是元素类属性的选择器，其中包含 class。

- Russ Cam

---

Jquery对于复选框（checkbox）的笔记建议使用[type="checkbox"]进行选择器编写。$('[type="checkbox"].class')....或者 $('input[type="checkbox"].class') - TSmith

@TSmith，你有参考资料吗？ - Russ Cam

我从这里阅读到的：http://api.jquery.com/checkbox-selector/ ...在“附加说明”下面。 - TSmith

Answer 3

以下是必要的 .map 示例:

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

- karim79

---

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

@Fedir：你的命令返回结果是on,on（每个复选框都被选中时返回'on'） - Jay

@Jay，你需要设置复选框的值属性，以便将它们的值作为逗号分隔字符串获取。 - Kamran Ali

Answer 4

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

以下代码会获取所有 class 为 "yourClass" 的复选框。我喜欢这个示例，因为它使用了 jQuery 选择器 checked 而不是进行条件检查。个人而言，我还会使用数组来存储这些值，需要时再使用，例如：

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

- alienriver49

---

如果需要将值存储在数组中，.map 可能是更好的选择，正如 karim79 的回答所示。 - duplode

谢谢 :) 我需要找到所有被选中的复选框，你的答案做到了。 - ufk

Answer 5

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

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

- Faraz Kelhini

Answer 6

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

- Alp

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

- Philip Voloshin

---

这是最好的答案。 - Marcos Buarque

Answer 8

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

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

})();

console.log(valores);

- Caike Bispo

Answer 9

我不确定这对你的特定情况是否有帮助，也不确定在你的情况下，你想要包括的复选框是否都属于一个单独的表单、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() : "");
});

- Florian Mertens

Answer 10

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

请查看jQuery类选择器。

- Liza Daly