Question

我认为我的大脑已经检出并处于假日模式。我试图做一些非常简单的事情，我不能让它为我的生活而工作。

我有一个通过服务器端代码动态生成的表单。它可以有一个或多个具有复选框作为选项的问题。我需要检查以确保在任何组中检查至少一个项目，并且验证必须在纯JS（没有jQuery）中完成。

我正试着把它撞到桌子上试图让它发挥作用：

HTML：

<form onsubmit="return validateCheckboxes();">
<h4>Which things do you enjoy?</h4>

<input type='checkbox' name='2' value='12' id='2_12'>
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br />

<input type='checkbox' name='2' value='13' id='2_13'>
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br />

<input type='checkbox' name='2' value='14' id='2_14'>
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br />
<br />
<br />
<input type="button" value="Submit">

使用Javascript：

function validateCheckboxes() {
   if (document.querySelector('.2:checked')) {
        alert('something is checked');
        return true;
   } else {
        alert('NOTHING is checked');
        return false;
   }
};

jsFiddle链接：https://jsfiddle.net/r6c4hxhj/

Answer 1

选择器.2:checked正在复选框中查找class="2"。要选择name="2"复选框，您应该使用

document.QuerySelector('[name="2"]:checked')

function validateCheckboxes() {
   if (document.querySelector('[name="2"]:checked')) {
        alert('something is checked');
        return true;
   } else {
        alert('NOTHING is checked');
        return false;
   }
};

<form onsubmit="return validateCheckboxes();">
<h4>Which things do you enjoy?</h4>

<input type='checkbox' name='2' value='12' id='2_12'>
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br />

<input type='checkbox' name='2' value='13' id='2_13'>
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br />

<input type='checkbox' name='2' value='14' id='2_14'>
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br />
<br />
<br />
<input type="submit" value="Submit">
</form>

Answer 2

使用.2:checked进行测试，而2是名称值。将class=2添加到您的复选框。

Answer 3

您可以遍历每个复选框，看看是否在提交时进行了检查。

很酷我刚刚学到了一些东西，我没有意识到你可以在querySelectorAll中使用伪选择器。我仍然认为这是一个有效的模式，如果你想将检查的总数与总复选框进行比较，以使其更具动态性。没有另一个昂贵的querySelector属性调用。

function validateCheckboxes( form ){
  var checkboxes = slice( form.querySelectorAll('[type=checkbox]') ),
      ret = checkboxes.reduce( function( total, checkbox ){
        if( checkbox.checked ){
          ++total;
        }
        return total;
      }, 0 );
  
  console.log( ret + ' of ' + checkboxes.length + ' checkboxes checked' );
  return false; // to cancel submission for stack
}

function slice( arr, start ){
  return Array.prototype.slice.call( arr, start || 0 );
}

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<form onsubmit="return validateCheckboxes(this);">
<h4>Which things do you enjoy?</h4>

<input type='checkbox' name='2' value='12' id='2_12'>
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br />

<input type='checkbox' name='2' value='13' id='2_13'>
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br />

<input type='checkbox' name='2' value='14' id='2_14'>
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br />
<br />
<br />
<input type="submit" value="Submit">

Answer 4

表单元素需要结束标记</form>

该按钮必须是提交<input type="submit"/>

要获得HTMLCollection，请使用：
var chkList = document.querySelectorAll('input[type="checkbox"]:checked');

然后对集合的长度使用简单的条件： if (chkList.length > 0)

http://plnkr.co/edit/PXiQCk0f7Qu3H5EYIgOF?p=preview

function validateCheckboxes() {
  var chkList = document.querySelectorAll('input[type="checkbox"]:checked');
  if (chkList.length > 0) {
    alert('something is checked');
    return true;
  } else {
    alert('NOTHING is checked');
    return false;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <form onsubmit="return validateCheckboxes();" action="http://examples.funwebdev.com/process.php" method="post">
    <fieldset>
      <legend>Which things do you enjoy?</legend>

      <input type='checkbox' name='2' value='12' id='2_12'>
      <label for='2_12'>&nbsp;&nbsp;Breathing</label>
      <br />

      <input type='checkbox' name='2' value='13' id='2_13'>
      <label for='2_13'>&nbsp;&nbsp;Watching paint dry</label>
      <br />

      <input type='checkbox' name='2' value='14' id='2_14'>
      <label for='2_14'>&nbsp;&nbsp;Nothing</label>
      <br />
      <br />
      <br />
      <input type="submit" value="Submit">
    </fieldset>
  </form>
</body>

</html>

提交，检查已选中复选框的数量

4 个答案: