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

Posted 2023-05-09

【中文标题】如何检查用户是不是使用 jQuery/Javascript 从一组复选框中选中了至少一个复选框？

【英文标题】：How to check whether user has checked at least one checkbox from a group of checkboxes using jQuery/Javascript?如何检查用户是否使用 jQuery/Javascript 从一组复选框中选中了至少一个复选框？

【发布时间】：2015-03-09 07:12:55

【问题描述】：

我有以下 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？

请帮帮我。

谢谢。

【问题讨论】：

看看this other 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>

【参考方案2】：

我查看了docs for :checked selector，这也可以使用：

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>

【参考方案3】：

jQuery fiddlePure JS fiddle

在 jQuery 中，

您可以看到该组中有多少复选框被选中，如下所示：

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

获取所有选中的复选框(:checked)、$("input:checked")*，并且也是一个ul元素descendants的descendants，$("ul input:checked")。

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

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

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

Here's a 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 解决方案相同。

Here's a pure javascript JSFiddle，也实现了警报系统。

在js中可能有更简单的方法可以做到这一点，但我不知道。