提交时，检查已选中复选框的数量
[英]Onsubmit, check number of checkboxes checked
问题描述
我认为我的大脑已经退房并且处于假期模式。 我正在尝试做一些非常简单的事情，但我无法一辈子使用它。
我有一个通过服务器端代码动态生成的表单。 它可以包含一个或多个带有复选框作为选项的问题。 我需要检查以确保在任何组中至少检查了一项，并且验证必须在纯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'> Breathing</label><br />
<input type='checkbox' name='2' value='13' id='2_13'>
<label for='2_13'> Watching paint dry</label><br />
<input type='checkbox' name='2' value='14' id='2_14'>
<label for='2_14'> 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/
4 个解决方案
解决方案1
1 已采纳 2015-12-30 20:35:05
选择器.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'> Breathing</label><br /> <input type='checkbox' name='2' value='13' id='2_13'> <label for='2_13'> Watching paint dry</label><br /> <input type='checkbox' name='2' value='14' id='2_14'> <label for='2_14'> Nothing</label><br /> <br /> <br /> <input type="submit" value="Submit"> </form>
解决方案2
0 2015-12-30 20:10:01
使用.2:checked您正在针对该类进行测试，而2是名称值。 将class=2添加到您的复选框。
解决方案3
0 2015-12-30 20:37:10
您可以遍历每个复选框以查看提交时是否已选中它。
很酷，我刚刚学到了一些东西，但我没有意识到您可以在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'> Breathing</label><br /> <input type='checkbox' name='2' value='13' id='2_13'> <label for='2_13'> Watching paint dry</label><br /> <input type='checkbox' name='2' value='14' id='2_14'> <label for='2_14'> Nothing</label><br /> <br /> <br /> <input type="submit" value="Submit">
解决方案4
0 2015-12-30 20:46:23
表单元素需要一个结束标记</form>
该按钮必须为Submit <input type="submit"/>
为了获得HTMLCollection，请使用：
var chkList = document.querySelectorAll('input[type="checkbox"]:checked');
然后对集合的长度使用一个简单的条件： if (chkList.length > 0)
http://plnkr.co/edit/PXiQCk0f7Qu3H5EYIgOF?p=预览
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'> Breathing</label> <br /> <input type='checkbox' name='2' value='13' id='2_13'> <label for='2_13'> Watching paint dry</label> <br /> <input type='checkbox' name='2' value='14' id='2_14'> <label for='2_14'> Nothing</label> <br /> <br /> <br /> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>
检查并计数已选中复选框的数量
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.