如何检查用户是否已使用jQuery / Javascript选中了一组复选框中的至少一个复选框？

Question

我正在遵循HTML代码：

<ul class='select_ul' style="width:100%">
  <li><input name="chk_all_grp_day" id="chk_all_grp_day"  type="checkbox"/><span>All</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span></li><br />
  <li><input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span></li>
</ul>

现在，我必须使用jQuery / Javascript检查用户是否已选中上面复选框中的至少一个复选框。

如果他没有从上面的复选框中选中任何一个，则显示错误消息。

我应该如何使用jQuery / JavaScript？

请帮我。

谢谢。

Answer 1

尝试使用：

$('ul input[type=checkbox]:checked').length > 0// then at least one is checked else show error msg.

  $(document).ready(function(){ $("#click").click(function(){ check(); }); }); function check(){ if($('ul input[type=checkbox]:checked').length >0){ alert($('ul input[type=checkbox]:checked').length); }else{ alert("error msg"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='select_ul' style="width:100%"> <li><input name="chk_all_grp_day" id="chk_all_grp_day" type="checkbox"/><span>All</span></li> <li><input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span></li> <li><input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> </li> <li><input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span></li><br /> <li><input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> </li> <li><input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> </li> <li><input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span></li> <li><input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span></li> </ul> <button id="click">click</button> 

Answer 2

jQuery提琴
纯JS小提琴

在jQuery中，

您可以看到选中了该组中的多少个复选框，如下所示：

$("ul input:checked").length > 0

获取所有已选中（：checked） ， $("input:checked") *的$("input:checked") ，并且它们也是ul元素$("ul input:checked") 后代 。

^{*我们不需要[type=checkbox]因为只能选中复选框/单选按钮，因此在您的情况下，没有单选按钮将是多余的。}

如果页面上有多个这样的组，则可以考虑给每个ul“容器”一个ID，并以这种方式获取一个组的复选框：

$("#my-ckeckbox-group-id input:checked")

这是一个JSFiddle ，它也实现了警报。

在小提琴中，我使用了以下代码：

$("#submitton").click(function(){
    if ($("ul.select_ul input:checked").length > 0){
        $("body").html("Well Done! You checked at least 1 check box!");
    } else {
        alert("You need to check at least one checkbox.");
    }
});

这还将实例化错误/警告消息。

用普通的javascript，

只需将所有选中的复选框存储在一个数组中，然后检查其长度即可：

document.querySelectorAll("ul input:checked").length > 0;

它几乎与jQuery解决方案相同。

这是一个纯Javascript JSFiddle ，它也实现了警报系统。

在js中可能有一种更简单的方法来执行此操作，但我不知道。

Answer 3

我看了：checked选择器的文档，也可以使用它：

var n = $( "input:checked" ).length;

 $("button").click(function() { var n = $("input:checked").length; if (n === 0) $("#result").text("You haven't checked any options"); else $("#result").text(""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class='select_ul' style="width:100%"> <li> <input name="chk_all_grp_day" id="chk_all_grp_day" type="checkbox" /><span>All</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span> </li> <br /> <li> <input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span> </li> <li> <input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span> </li> </ul> <button>click</button> <div id="result"></div>