Javascript计算TABLE行中复选框的数量[重复]答案

【问题标题】：Javascript count the number of checked boxes in a TABLE row [duplicate]Javascript计算TABLE行中复选框的数量[重复]
【发布时间】：2020-01-03 04:02:17
【问题描述】：

我有一个表格，每行有 3 个复选框。我想确保在给定时间检查其中至少 2 个。

<table id="mytable">
<tr>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
</tr>
</table>

在 Javascript 中寻找类似的东西-

$('#mytable').find('tr').each(function () {
    var row = $(this);
    if (row.find('input[type="checkbox"]').is(':checked').length < 2) {
        alert('You must check at least 2 checkboxes');
    }
});

应该是一个简单的句法，但我想不通。

【问题讨论】：

$('#mytable [type=checkbox]:checked').length 应该可以代替.each() 工作。 [type=checkbox] 可以是很多东西，具体取决于您的 HTML。
@kev 你是在纯 js 还是 jquery 中寻找它？无论哪种方式，这是一个低质量的问题，并且可能重复。
@r3wt 其他答案是计算文档中的复选框。我的答案的语法有点不同。天哪，你们让新手学习一门新语言真的很困难，不是吗？
@kev 同样的答案适用于您的情况，您可以查询任何节点，无论是 document 还是您选择的任意 domNode。在您的情况下，根将是document.getElementById('mytable') 或document.querySelector('#mytable')。那么您只需更改该节点的 getElementsByTagName('input') 即可。
所以你的意思是document.getElementById('mytable').getElementsByTagName('input[type="checkbox"]:checked').length？

标签： javascript html

【解决方案1】：

您可以使用filter(':checked') 代替is()

$('#mytable').find('tr').each(function () {
    var row = $(this);
    if (row.find('input[type="checkbox"]').filter(':checked').length < 2) {
        alert('You must check at least 2 checkboxes');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tr>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked /></td>
</tr>
</table>

如 cmets 中所述，您可以首先使用 input[type="checkbox"]:checked 选择已检查的输入，而无需过滤。

【讨论】：

这是一个 JS 解决方案如何？
它不是纯 JavaScipt。 OP 在他的代码中使用了 jQuery，所以我也使用了它。