要求所有复选框被选中

Question

我有一个带有复选框的字段，需要在提交之前选择。问题在于它不是常数个复选框，因为它取决于从数据库中获取的要检查的值的数量。

基本上，复选框的数量范围从1到9。

我正在使用ajax发送值，所以我没有在表单中列出“可选项”，而是以列表形式呈现。类似这样：

Unit 1: <input type="checkbox" name="unit[]" value="1"/>
Unit 2: <input type="checkbox" name="unit[]" value="2"/>
Unit 3: <input type="checkbox" name="unit[]" value="3"/>
Unit 4: <input type="checkbox" name="unit[]" value="4"/>

<input type="submit" value="register units"/>

问题是：如何确保每次提交之前所有复选框都被选中。

- John Kariuki

Answer 1

就像这样：

if($('input[type="checkbox"]:checked').length == $('input[type="checkbox"]').length){
  //all checkboxes are checked.
}

您也可以使用name属性，使用$('input[name="unit[]"]'和$('input[name="unit[]"]:checked')来定位元素。

- Milind Anantwar

Answer 2

您也可以用以下方式实现 -

     <form name="myForm" action="targetpage.asp" onsubmit="return validateForm();" method="post">  
         Unit 1: <input type="checkbox" name="unit" value="1" />  
         Unit 2: <input type="checkbox" name="unit" value="2" />  
         Unit 3: <input type="checkbox" name="unit" value="3" />  
         Unit 4: <input type="checkbox" name="unit" value="4" />  
         <input type="submit" value="submit" id="XISubmit" />  
     </form>  



 <script>  
     function validateForm() {  
         if (validateCheckbox(document.forms["myForm"]["unit"])) {  
             alert('All good!');  
             return false;  
         }  
         else {  
             alert('Please select all checkboxes.');  
             return false;  
         }  
     }  

     function validateCheckbox(chk) {  
         for (i = 0; i < chk.length; ++i) {  
             if (!chk[i].checked) return false;  
         }  
         return true;  
     }  
 </script>  

- Manish Gupta

Answer 3

尝试类似以下的内容。

if($('form input:checked').length == $('form input:checkbox').length){
//submit
}

- Anton

---

太棒了！我怎么没想到呢？:( - John Kariuki

Answer 4

在提交处理程序中，检查未选中复选框的长度，如果长度大于0，则显示错误消息并阻止默认操作。

if($('input[name="unit[]"]').not(':checked').length){
    alert();
    return;
}

- Arun P Johny

---

谢谢，但是这个会在任何时候遍历所有列出的复选框，而不管这些复选框的数量吗？ - John Kariuki

我不太明白这是如何工作的，您能否简要解释一下这个最后一部分 '.not(':checked').length)' 是什么意思？ - John Kariuki

@JohnKariuki 我希望你清楚第一部分 $('input[name="unit[]"]')... 如果是这样的话，.not(':checked') 将通过选择未选中的复选框来过滤该集合... 现在我们有了一组未选中的复选框... .length 将返回集合中的项目数.. 类似于 0、1、2 等等... 如果所有的都被选中，那么它将返回 0，否则将返回一个正整数值，这些值被认为是真值，因此它将满足 if 条件。 - Arun P Johny

谢谢！这样的才华令人钦佩！ - John Kariuki

@JohnKariuki仍然无法弄清楚为什么它被踩了。 - Arun P Johny

Answer 5

    <input type="checkbox" name="unit[]" value="1"/>
     <input type="checkbox" name="unit[]" value="2"/>
     <input type="checkbox" name="unit[]" value="3"/>
    <input type="checkbox" name="unit[]" value="4"/>
 <input type="button" id="buttonsubmit" />

这是你的HTML

这是jQuery

$('#buttonsubmit').click(function(){
$('.checkme').each(function(){
  var aa="all"
  if(!$(this).is(':checked'))
  {
  aa='notchecked';

  }

  if(aa=='notchecked')
                   {

                   alert('all not checked');
                   }
                   else

                     {
                       alert('all checked');

                     }

});
});

看看这个演示点击这里

- Just code