使用 jQuery 检查是否至少选中了一个复选框答案

【问题标题】：Check if at least one checkbox is checked using jQuery使用 jQuery 检查是否至少选中了一个复选框
【发布时间】：2011-12-03 18:28:26
【问题描述】：

我有五个复选框。使用 jQuery，如何检查是否至少检查了其中一个？

<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">

【问题讨论】：

标签： javascript jquery

【解决方案1】：

is() 可以做到这一点，并且可以说是is(":checked") 唯一可接受的用法：

来自 jQuery 文档，http://api.jquery.com/is/：

根据选择器、元素或 jQuery 对象检查当前匹配的元素集，如果这些元素中至少有一个与给定参数匹配，则返回 true。
alert($("input[name='service[]']").is(":checked"));
示例：http://jsfiddle.net/AndyE/bytVX/1/（基于 Brandon Gano 的小提琴）

或者，您可以将函数传递给is()，并且可能更快：

$("input[name='service[]']").is(function () {
    return this.checked;
});

【讨论】：

【解决方案2】：

这应该可以解决问题：

function isOneChecked() {
    return ($('[name="service[]"]:checked').length > 0);
}

【讨论】：

【解决方案3】：

编辑： 这个答案中的原始解决方案效率低下，不应使用。请参阅基于 cmets 的修订解决方案以及此问题的其他答案中的示例。

原始（坏）解决方案如下：

// DO NOT USE; SEE BELOW
$('button').click(function () {
  var atLeastOneIsChecked = false;
  $('input:checkbox').each(function () {
    if ($(this).is(':checked')) {
      atLeastOneIsChecked = true;
      // Stop .each from processing any more items
      return false;
    }
  });
  // Do something with atLeastOneIsChecked
});

在此示例中使用 .each() 是多余的，因为 .is() 可以直接用于对象集，而不是手动迭代每个对象。一个更有效的解决方案如下：

$('button').click(function () {
  var atLeastOneIsChecked = $('input:checkbox').is(':checked');
  // Do something with atLeastOneIsChecked
});

请注意，其中一个 cmets 表示非常不喜欢 $(this).is(':checked')。澄清一下，在您测试一组对象的情况下，is(':checked') 没有任何问题。也就是说，在单个项目上调用 is(':checked') 比在同一项目上调用 .checked 效率要低得多。它还涉及对 $ 函数的不必要调用。

【讨论】：

如果我看到$(this).is(':checked')，我会把开发者带回去和他聊几句。
为什么这个答案被大量否决？如果有任何问题，请提供原因说明为什么在 cmets 中会出现这种情况。
显然，代码可以写得更干净。但是，这并不会使这个答案不正确。这种投反对票的行为是荒谬的，而且是消极的。在没有解释的情况下拒绝“不太好”的答案根本没有意义。
@Andy E：我完全同意。在接受的答案不是最佳解决方案的情况下，我完全支持否决票。我已更新答案以总结原始解决方案的问题并提供更好的解决方案。
这实际上是一个很好的答案，因为它通过一种其他人可能会尝试的次优方法来工作，解释它为什么不好，然后解释一个更合适的解决方案。很高兴你把它留在身边。

【解决方案4】：

另一个答案：

!!$("[type=checkbox]:checked").length

或

!!$("[name=service[]]:checked").length

这取决于你想要什么。

【讨论】：

你完全可以:checkbox:checked它
@island205：“误解 css 选择器”是什么意思？
@BoltClock，让我看看。[1]有一天，有新人问“为什么我不能得到 textarea width $(':text,:textarea')？”在 JS 聊天室中，我认为这很容易被新手误解。[2] ":checkbox" 是 css 选择器吗？不，这是一个糟糕的标准，只是在 jQuery.in css 中，":something" 是伪类。[3]"[type=checkbox]" 更有效，$ 可以使用 browser.BTW 提供的 "querySelectorAll" API，请给我一个赞成票，我可以反对错误但选择的答案！
我不明白。 jQuery 选择器引擎的全部点是让您在旧浏览器中使用高级 CSS 选择器，和某些非标准选择器/扩展来简化您的选择代码。如果您只是为了性能而避免它，您不妨直接使用 QSA，而无需通过 $() 调用，也不要教任何人有关 jQuery 的知识。

【解决方案5】：

var checkboxes = document.getElementsByName("service[]");
if ([].some.call(checkboxes, function () { return this.checked; })) {
  // code
}

你想要的很简单，获取所有带有名称的元素，然后如果其中一些元素被选中，则运行一些代码。

不需要 jQuery。

你可能需要一个用于旧版浏览器的 ES5 shim

【讨论】：

【解决方案6】：

你应该这样尝试......

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");

checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));

});

【讨论】：

如果你能解释一下为什么就更好了。

【解决方案7】：

你需要检查复选框是否被选中。

$("#select_all").click(function(){
           var checkboxes = $("input[type='checkbox']");
           if(checkboxes.is(":checked"))
               alert("checked");
           else
               alert("select at least one;      

            });

【讨论】：

【解决方案8】：

var atLeastOneIsChecked = $('input[name="service[]"]:checked').length > 0;

【讨论】：

checkbox.length 会告诉您有多少复选框具有该名称。它不区分选中和未选中的框。
更新了答案

【解决方案9】：

方括号[] 不是必须的：

var atLeastOneIsChecked = $("input[name='service']:checked").length > 0;

HTML 也是如此，但最好使用 id 来唯一标识每个复选框：

<input id="chk1" type="checkbox" name="service">
<br />
<input id="chk2" type="checkbox" name="service">
<br />
<input id="chk3" type="checkbox" name="service">
<br />
<input id="chk4" type="checkbox" name="service">
<br />
<input id="chk5" type="checkbox" name="service">

【讨论】：

【解决方案10】：

您可以通过以下方式进行操作。最初设置一个变量，假设checked 为false。如果满足以下条件，则将其设置为true。使用if 语句检查变量。注意：这里submit是按钮的id，main是表单的id。

$("#submit").click(function() {
  var checked = false;
  if (jQuery('#main input[type=checkbox]:checked').length) {
    checked = true;
  }
  if (!checked) {
    //Do something
  }
});

【讨论】：