如果未选中复选框，则显示警报答案

【问题标题】：Show alert if no check box is selected如果未选中复选框，则显示警报
【发布时间】：2015-07-17 05:59:34
【问题描述】：

我有一张桌子，如果没有选中任何复选框，我需要显示警报。

下面是表结构

<table id="mytable">
  <tr><td><input type="checkbox" name="one" value="1" /></td></tr>
  <tr><td><input type="checkbox" name="two" value="2" /></td></tr>
  <tr><td><input type="checkbox" name="three" value="3" /></td></tr>
</table>

请指导我如何实现这一目标？

【问题讨论】：

重复 1:stackoverflow.com/questions/4086957/… 重复 2:stackoverflow.com/questions/2684434/… 请检查这两个链接

标签： javascript jquery

【解决方案1】：

要检查检查了多少个复选框，您可以简单地使用：

var checked = $('#mytable').find(':checked').length;

这会计算您的 #mytable 元素中有多少已选中的元素。如果这返回0，那么我们知道没有检查，所以我们可以显示警报：

if (!checked)
    alert('...');

演示

$('button').on('click', function() {
  var checked = $('#mytable').find(':checked').length;

  if (!checked)
    alert('No checkboxes are checked!');
  else
    alert(checked + ' checkboxes are checked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable">
    <tr><td><input type="checkbox" name="one" value="1" /></td></tr>
    <tr><td><input type="checkbox" name="two" value="2" /></td></tr>
    <tr><td><input type="checkbox" name="three" value="3" /></td></tr>
</table>

<button type="button">Check</button>

【讨论】：

这实际上工作得很好，我不认为它应该那么简单。谢谢

【解决方案2】：

这样就可以了

if ($('#mytable :checked').length == 0) {
     // no checkbox is selected, show your validation message
     return
}

// at least one checkbox is checked, continue with normal flow

【讨论】：

【解决方案3】：

vanilla JS document.querySelectorAll("#mytable input:checked").length 和 jQuery $(#mytable :checked).length 都可以解决问题。

document.getElementById("submit").onclick = function() {
  var count = document.querySelectorAll("#mytable :checked").length;
  document.getElementById("output").innerHTML = count;
};

<table id="mytable">
  <tr>
    <td>
      <input type="checkbox" name="one" value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="two" value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="three" value="3" />
    </td>
  </tr>
</table>
<input id="submit" type="button" value="count checks" />
<div id="output" />

【讨论】：