JQuery 确定是否所有复选框列表（在 div 中）已被选中答案

【问题标题】：JQuery to determine if all checkboxlists (in div) have been checkedJQuery 确定是否所有复选框列表（在 div 中）已被选中
【发布时间】：2010-10-25 21:10:49
【问题描述】：

我正在尝试使用 jQuery 对表单进行一些验证；我需要一种方法，我可以验证 a 中的所有控件是否已被填写 \ 选中。我的应用程序支持的 CheckBoxLists 让我很难受，因为 jQuery 似乎喜欢单独处理每个复选框，但我真正需要做的是评估 div 中的所有 CBL，并知道每个 CBL 是否至少有一个单独的复选框被选中。

我可以按我认为合适的方式命名 DIV 和各个 CBL 的 ID（CBL1、CBL2 等也可以）。我真的需要一种方法来解析

中的所有内容

【问题讨论】：

你能给我们一些渲染的 HTML 吗？ CheckBoxLists 不是一个 HTML 概念，而是一个被翻译成 HTML 的 Microsoft 概念。
即使这个答案也可能有助于了解如何遍历stackoverflow.com/questions/786142/…

标签： javascript jquery checkboxlist

【解决方案1】：

假设 ASP 会这样解析您的 CBL：

<h2>Interests</h2>
<ul id='CBL1' class='checkboxlist'>
    <li><input type='checkbox' name='interest' value='javascript'> JavaScript</li>
    <li><input type='checkbox' name='interest' value='jquery'> jQuery</li>
</ul>
<h2>Hobbies</h2>
<ul id='CBL2' class='checkboxlist'>
    <!-- subsequent data -->

您可以通过以下方式进行检查：

function validateCBLs() {
    var $lists = $('ul.checkboxlist');
    $lists.each(function(i, item) {
        if ($(item).find(':checked').length < 1) {
            //Show user an error, etc
            alert('Please, check at least one item from ' + $(item).attr('id'));
        }
    });
}

JSFiddle：Here

【讨论】：

+1 但是...为什么变量名前面有 $ 符号？哦，你还需要一个 var 语句。
@Billy ONeal，有些人在 jQuery 选择器变量前加上 $ 以将其标识为 jQuery 选择器。我不总是，而且我无法告诉你我为什么在这里这样做...修复了 var 语句。

【解决方案2】：

function hasBoxesChecked(id) {
  return $(":checkbox:checked", document.getElementById(id)).length > 0;
}

这是live demo

【讨论】：

注意：演示使用来自两个 ASP.NET CheckBoxList 控件的实际输出

【解决方案3】：

您需要在每个列表中选择至少 1 个复选框。想知道这是否可行（让所有 CBL 都有一个以“CBL”开头的 ID（例如 CBL1、CBL2、...））：

var valid = true;
$('[id^="CBL"]').each(function(i,v){
    valid = valid && ($(this).find(':checkbox:checked').size() >= 1);
});
alert(valid);

JSFiddle

【讨论】：

这会检查是否所有复选框都已被选中，而不是所有复选框列表。
@Rocket - 它是 ASP.Net 中的一个控件，呈现为复选框的表格或流布局
复选框列表包含复选框，对吗？那么，为什么这不起作用？
@Rocket - 您需要检查 every 列表中的 every 复选框，而不是每个列表中至少一个。
@Nick- 哦。谢谢。那就忽略这个答案吧。

【解决方案4】：

试试这个：

$('.checkboxlist').filter(function(){
            return $(this).find(':checked').size()>0;
        }).size()

这将为您提供至少选中一个复选框的 CBL 数量。

【讨论】：