如何检查多个复选框中至少有一个复选框被选中？答案

【问题标题】：How to check that at least one checkbox is checked in multiple checkboxes?如何检查多个复选框中至少有一个复选框被选中？
【发布时间】：2015-06-03 07:41:22
【问题描述】：

在我的表单中，使用了很多复选框。我想检查是否至少选中了一个复选框。

<div id="sun">
    <li><?php echo $this->__("SUN");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="mon">
    <li><?php echo $this->__("MON");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="tue">
    <li><?php echo $this->__("TUE");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="wed">
    <li><?php echo $this->__("WED");?> </li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12AM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"></li>
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"></li>
</div>

如何验证至少有一个复选框被选中？

【问题讨论】：

您想在客户端站点 (javascript) 或后端 f.e. 上进行验证。用 PHP 吗？
你在使用 jQuery 吗？
您的标记需要更正... li (listitem) 是 ul (无序列表) 或 ol (有序列表) 的子节点

标签： javascript checkbox

【解决方案1】：

好吧，直截了当：

var isSomeAlldayCheckboxChecked = document
  .querySelectorAll('input[type="checkbox"].allday')
  .some(function (each) { return each.checked; });

【讨论】：

原版 ('input.allday') 已经足够好了，只有 <input>s 类为 allday 的是复选框。使选择器不必要地详细是没有意义的。如果您想将选择器限制为复选框@BrettCaswell，您还应该将变量重命名为isSomeAlldayCheckboxesChecked。
您正在回答的问题的海报说“我想检查至少一个复选框被选中”..这是一个类型约束，您不应该在解决方案中忽略，因为您推断 - 从示例代码 - 没有必要......在这方面，（'.allday'）或（'input'）也足够了......
...而您仍然留下变量名与您更改选择器不一致。
herby，就我而言，变量将在这里命名为 foobar 或结果。我对函数名称使用更合格的命名。在这种情况下，它不会是全部这与您在这里建议的变量重命名不同..但这完全取决于范围..
无论如何，它被根据上下文命名以命名它实际包含的内容。当您更改实现时，您还应该重命名变量以匹配您的更改。你会好心地完成你的编辑吗？谢谢。

【解决方案2】：

大致如下：

var formNodes  = document.checks.getElementsByTagName('input');
for (var i=0;i<formNodes.length;i++) {
   /* If one is true set a variable to true and exit the loop */
}

堆栈溢出帖子Here

干杯，

真人

【讨论】：

你需要更正这个答案.. checks.. 指的是表单的名称.. document.form['checks'] 将是等价的.. 同样，getElementsByTag('input') 将返回所有输入标签..您至少应该在输入类型的条件语句中添加..
这会循环所有输入控件还是只是复选框？只是想知道是否在任何时候另一个控件可以评估为真。
@grdev76 它将循环所有输入控件 - 以名为检查的形式 - 无论它们的类型如何。选中的属性是在输入标签上定义的，这是规范化的。jsfiddle.net/2r533gb1jsFiddle
@grdev76，话虽如此.. 只有输入类型 radio 和 checkbox 显示选中的值，当值改变时更新控件，并提供一种方法（点击事件）来改变选中的属性.考虑input:checked 和input[checked="true"] 之间的区别，梯形图正在寻找属性的存在。因此，如果您要切换/分配选中的属性的值，CssSelectors（用于 querySelector 或样式）将不起作用，除非您还在 DOM 上创建/修改 attributeNode。
什么是document.checks？如果它是上面@BrettCaswell 所暗示的（具有id“检查”的表单本身），那么这是StackOverflow 答案中可能出现的最糟糕的事情之一。长期以来，不鼓励使用 id 作为属性名来访问 DOM 元素； DOM 的作者认为这是他们的重大错误之一。它仅适用于向后兼容性，但绝不应该在任何新代码中使用它。有 document.getElementById('checks') 或其他 API。 -1，如果可以的话，我加 -100，直到这个问题被修复。

【解决方案3】：

var count= 0;
var value_array=new Array();
jQuery('input[type="checkbox"]:checked').each(function(){ 
   value_array.push(jQuery(this).val());
   count = count + 1;
});

// count&value_array will tell you total selected

【讨论】：

【解决方案4】：

如果您使用的是supported browser，则可以利用 :checked 伪选择器进行非常简洁的检查。只需执行以下操作：

if(document.forms[0].querySelector('input[type="checkbox"]:checked').length) {
  //At least 1 checkbox is selected within document
}

确保通过文档对象上的document.querySelector 或document.forms 列表定位正确的表单（如上所示）。

【讨论】：

【解决方案5】：

您可以为此使用 Jquery。

if ($('#form_id :checkbox:checked').length > 0)
{
        // one or more checkboxes are checked
}
else
{
       // no checkboxes are checked
}

【讨论】：

【解决方案6】：

@herby的答案是检查input[type='checkbox']数组中的某些输入是否被检查的正确答案。

此答案使用 querySelectorAll (MyFormManager.get_checkedInputs) 返回一组检查过的输入；它演示了将事件侦听器添加到查询 input 元素 change 事件 (MyFormManager.init) - 将检查状态附加到元素 (MyFormManager.onCheckChanged) 的 className - 以促进该过程。

var MyFormManager = {
  checkboxes: null,  
  onCheckChanged: function(sender, e) {
    console.log("sender:= %o, e:= %o", sender, e);
    sender.className = sender.className.replace(' true','').replace(' false','');
    sender.className += ' ' + String(sender.checked);
  },
  init : function() {
    checkboxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0, max = checkboxes.length; i < max; i++)
    {
      checkboxes[i].addEventListener('change', MyFormManager.onCheckChanged.bind(null, checkboxes[i]));
    }
  },
  get_checkedInputs : function() {
    return document.querySelectorAll("input[type='checkbox'].true");
  }
}

console.log(MyFormManager);
    
MyFormManager.init();

var message = document.querySelector("div#message");
    
document.querySelector("button#runCheck").addEventListener("click", function (e) {
  var checkedInputs = MyFormManager.get_checkedInputs();
  console.log(checkedInputs);
  message.innerHTML = "";
  var parentId;
  for (var i = 0, max = checkedInputs.length; i < max; i++)
  {
    parentId = checkedInputs[i].parentNode.parentNode.parentNode.id;
    message.innerHTML += '<div class="item"><span class="parentId">' + parentId + '</span><span class="checkedInput">' + checkedInputs[i].value + '</span></div>';
  }
});

body {background-color:whitesmoke;}

div { display:block;}

div > ul { 
  list-style:none;
  margin:0.5em auto 0 auto;
  padding:0.27em;
  background-color:white;
  border:0.05cm solid silver;
}

input[type='checkbox'] {cursor:pointer;}

div:first-child > ul:first-child {margin-top:0em;}

div > ul > li {list-style:none;}

div > ul > li > label {display:inline-block;padding:0.1em 0.3em;margin:0;width:8em;text-align:right;}


div.item {display:block;}
div.item > span.parentId {display:inline-block;width:3em;text-transform:uppercase;}
div.item > span.checkedInput {display:inline-block;width:8em;text-align:right;}

<div id="debugger">
  <div id='message'></div>
  <button id='runCheck'>Run Check</button>
</div>

<div id="sun">
  <ul>
    <li><!-- <?php echo $this->__("SUN");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="mon">
  <ul>
    <li><!-- <?php echo $this->__("MON");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>
<div id="tue">
  <ul>
    <li><!-- <?php echo $this->__("TUE");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>
<div id="wed">
  <ul>
    <li><!-- <?php echo $this->__("WED");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="thur">
  <ul>
    <li><!-- <?php echo $this->__("THUR");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Thursday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="fri">
  <ul>
    <li><!-- <?php echo $this->__("FRI");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Friday][6-9]" value="6PM - 9PM">
    </li>
  </ul>
</div>

<div id="sat">
  <ul>
    <li><!-- <?php echo $this->__("SAT");?> --></li>
    <li>
      <label>9AM - 12PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][9-12]" value="9AM - 12PM">
    </li>
    <li>
      <label>12PM - 6PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][12-6]" value="12PM - 6PM">
    </li>
    <li>
      <label>6PM - 9PM</label>
      <input class="allday" type="checkbox" name="availableday[Saturday][6-9]" value="6PM - 9PM">
    </li>
  </ul>  
</div>

请注意，这没有优化，也没有考虑动态控件（回发或 xhr）；

【讨论】：

请注意，此示例“遍历”调试消息功能中的 DOM 以确定所检查的星期几的上下文...我可能会在输入上定义和使用数据属性，而不是依赖于特定的节点结构 - ..