Question

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

以下是表格结构

<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>

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

Answer 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>

Answer 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

Answer 3

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

如果未选中任何复选框，则显示警报

3 个答案:

演示