验证是否所有复选框都未选中的快速方法？答案

【问题标题】：Fast way to validate if all checkboxes are un-selected?验证是否所有复选框都未选中的快速方法？
【发布时间】：2010-10-29 17:36:24
【问题描述】：

如果取消选中所有复选框，是否有一种快速方法或功能可以告诉我真/假？不经过数组？（带有 JS 和 HTML）

我所有的复选框都具有相同的名称...

<form action="/cgi-bin/Lib.exe" method=POST name="checks" ID="Form2">
    <input type=checkbox name="us" value="Joe" ID="Checkbox1">
    <input type=checkbox name="us" value="Dan" ID="Checkbox2">
    <input type=checkbox name="us" value="Sal" ID="Checkbox3">
</form>

【问题讨论】：

标签： javascript html validation forms input

【解决方案1】：

对于这样微不足道的任务，jQuery 将是一大堆不必要的臃肿。如果您将它用于其他目的，请考虑使用它，但您只需要这样的东西：

function AreAnyCheckboxesChecked () {
  var checkboxes = document.forms.Form2.elements.us;
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      return true;
    }
  }
  return false;
}

【讨论】：

【解决方案2】：

您必须遍历它们。即使是像 jQuery 这样的库也会循环遍历它们，只是对你隐藏它。

var form = document.getElementById('Form2');
var inputs = form.getElementsByTagName('input');
var is_checked = false;
for(var x = 0; x < inputs.length; x++) {
    if(inputs[x].type == 'checkbox' && inputs[x].name == 'us') {
        is_checked = inputs[x].checked;
        if(is_checked) break;
    }
}
// is_checked will be boolean 'true' if any are checked at this point.

【讨论】：

如果最后一个复选框被选中，那不会返回吗？例如。以萨尔为例。

【解决方案3】：

JavaScript：

var allischecked = (function(){
  var o = document.getElementById("Form2").getElementsByTagName("input");
  for(var i=0,l=o.length;i<l;i++){
    o[i].type === "checkbox" && o[i].name === "us" && o[i].checked || return false;
  }
  return true;
})();

使用 jQuery：

var allischecked = ($("#Form2 input:checkbox:not(checked)").length === 0);

【讨论】：

+1 也用于显示 JQuery 版本。是的，如果这就是你想要做的，那么 JQuery 是矫枉过正的。但如果你有其他验证，AJAX 等，单行测试很难被击败。

【解决方案4】：

总而言之，如果未选中所有内容，此片段将返回 true。一旦找到已检查的，它就会退出。

var a = document.getElementsByName("us");
for(var i=0; i<a.length; i++)
   if(a[i].checked)
      return false;
return true;

（未测试，但从概念上讲是有效的）

【讨论】：

感谢您的链接 - 之前没有看到该图表

【解决方案5】：

什么意思

不经过数组

?

你可以这样做

 function check() {
    var anyChecked = false;
    var form = document.getElementById('Form2');
    var checkboxes = form.getElementsByTagName('input');
    for(var i=0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                anyChecked  = true;
                break;
            }
    } 
    alert("Checkboxes checked? " + anyChecked);
}

Working Demo

【讨论】：

getElementsByName 在 IE 中很古怪，在 Opera 中有点奇怪：quirksmode.org/dom/w3c_core.html，我尽量避免使用它。

【解决方案6】：

如果您不想循环测试大量复选框，则使用此方法可能更有效。

var checked = 0;

$("input[type=checkbox]").live("click", function() {
    if($(this).attr("checked")) checked++;
    else checked--;
}

那么你就可以这样测试了。

if(checked === 0) {
    doSomething();
}

【讨论】：

【解决方案7】：

jQuery属性checked的正确解决方案：

$checkboxes = $('#Form2 input:checkbox');
$checkboxes.on('click', checkboxes);

function checkboxes() {
  var allChecked = $checkboxes.not(':checked').length == 0;
  console.log(allChecked);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form action="/cgi-bin/Lib.exe" method=POST name="checks" ID="Form2">
    <input type=checkbox name="us1" value="Joe" ID="Checkbox1"><label>Joe</>
    <input type=checkbox name="us2" value="Dan" ID="Checkbox2"><label>Dan</>
    <input type=checkbox name="us3" value="Sal" ID="Checkbox3"><label>Sal</>
</form>

【讨论】：

【解决方案8】：

没有循环更容易

const toggleCheckboxes = checkbox => {
   if(checkbox.checked){
      return true
   }else{
      if(document.querySelectorAll(':checked').length === 0){
          // All are unchecked
          return false
      }
   }
}

【讨论】：