[英]How to check that at least one checkbox is checked in multiple checkboxes?
In my form so many checkboxes are used. 在我的表单中使用了很多复选框。 I want to check that at least one checkbox is checked.
我想检查是否至少选中了一个复选框。
<div id="sun">
<li><?php echo $this->__("SUN");?> </li>
<li><input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12AM"></li>
<li><input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"></li>
<li><input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="mon">
<li><?php echo $this->__("MON");?> </li>
<li><input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12AM"></li>
<li><input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"></li>
<li><input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="tue">
<li><?php echo $this->__("TUE");?> </li>
<li><input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12AM"></li>
<li><input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"></li>
<li><input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"></li>
</div>
<div id="wed">
<li><?php echo $this->__("WED");?> </li>
<li><input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12AM"></li>
<li><input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"></li>
<li><input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"></li>
</div>
How to validate at least one checkbox is checked? 如何验证至少一个复选框?
Well, straightforwardly: 好吧,直截了当:
var isSomeAlldayCheckboxChecked = document
.querySelectorAll('input[type="checkbox"].allday')
.some(function (each) { return each.checked; });
var count= 0;
var value_array=new Array();
jQuery('input[type="checkbox"]:checked').each(function(){
value_array.push(jQuery(this).val());
count = count + 1;
});
// count&value_array will tell you total selected
You can use Jquery for this. 您可以使用Jquery。
if ($('#form_id :checkbox:checked').length > 0)
{
// one or more checkboxes are checked
}
else
{
// no checkboxes are checked
}
@ herby
's answer is the correct answer for checking whether some input in the input[type='checkbox']
array is checked. @
herby
的答案是检查input[type='checkbox']
数组中的某些输入是否被检查的正确答案。
This answer returns an array of checked inputs using querySelectorAll ( MyFormManager.get_checkedInputs
); 此答案使用querySelectorAll (
MyFormManager.get_checkedInputs
)返回已检查输入的数组; it demonstrates adding event listeners to the queries input
elements change
event ( MyFormManager.init
) - which appends the check state to the className
of the element ( MyFormManager.onCheckChanged
) - to facilitate the process. 它演示了向查询添加事件监听器
input
元素change
事件( MyFormManager.init
) - 它将检查状态附加到元素的className
( MyFormManager.onCheckChanged
) - 以方便该过程。
var MyFormManager = { checkboxes: null, onCheckChanged: function(sender, e) { console.log("sender:= %o, e:= %o", sender, e); sender.className = sender.className.replace(' true','').replace(' false',''); sender.className += ' ' + String(sender.checked); }, init : function() { checkboxes = document.querySelectorAll("input[type='checkbox']"); for (var i = 0, max = checkboxes.length; i < max; i++) { checkboxes[i].addEventListener('change', MyFormManager.onCheckChanged.bind(null, checkboxes[i])); } }, get_checkedInputs : function() { return document.querySelectorAll("input[type='checkbox'].true"); } } console.log(MyFormManager); MyFormManager.init(); var message = document.querySelector("div#message"); document.querySelector("button#runCheck").addEventListener("click", function (e) { var checkedInputs = MyFormManager.get_checkedInputs(); console.log(checkedInputs); message.innerHTML = ""; var parentId; for (var i = 0, max = checkedInputs.length; i < max; i++) { parentId = checkedInputs[i].parentNode.parentNode.parentNode.id; message.innerHTML += '<div class="item"><span class="parentId">' + parentId + '</span><span class="checkedInput">' + checkedInputs[i].value + '</span></div>'; } });
body {background-color:whitesmoke;} div { display:block;} div > ul { list-style:none; margin:0.5em auto 0 auto; padding:0.27em; background-color:white; border:0.05cm solid silver; } input[type='checkbox'] {cursor:pointer;} div:first-child > ul:first-child {margin-top:0em;} div > ul > li {list-style:none;} div > ul > li > label {display:inline-block;padding:0.1em 0.3em;margin:0;width:8em;text-align:right;} div.item {display:block;} div.item > span.parentId {display:inline-block;width:3em;text-transform:uppercase;} div.item > span.checkedInput {display:inline-block;width:8em;text-align:right;}
<div id="debugger"> <div id='message'></div> <button id='runCheck'>Run Check</button> </div> <div id="sun"> <ul> <li><!-- <?php echo $this->__("SUN");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="mon"> <ul> <li><!-- <?php echo $this->__("MON");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="tue"> <ul> <li><!-- <?php echo $this->__("TUE");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="wed"> <ul> <li><!-- <?php echo $this->__("WED");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="thur"> <ul> <li><!-- <?php echo $this->__("THUR");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Thursday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Thursday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Thursday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="fri"> <ul> <li><!-- <?php echo $this->__("FRI");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Friday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Friday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Friday][6-9]" value="6PM - 9PM"> </li> </ul> </div> <div id="sat"> <ul> <li><!-- <?php echo $this->__("SAT");?> --></li> <li> <label>9AM - 12PM</label> <input class="allday" type="checkbox" name="availableday[Saturday][9-12]" value="9AM - 12PM"> </li> <li> <label>12PM - 6PM</label> <input class="allday" type="checkbox" name="availableday[Saturday][12-6]" value="12PM - 6PM"> </li> <li> <label>6PM - 9PM</label> <input class="allday" type="checkbox" name="availableday[Saturday][6-9]" value="6PM - 9PM"> </li> </ul> </div>
note that this is not optimized, also it does not account for dynamic controls (postback or xhr); 请注意,这不是优化的,也不考虑动态控件(回发或xhr);
If you're using a supported browser , you can leverage the :checked pseudo selector for a really succinct check. 如果您使用的是受支持的浏览器 ,则可以使用:checked伪选择器进行非常简洁的检查。 Simply do something like this:
只需做这样的事情:
if(document.forms[0].querySelector('input[type="checkbox"]:checked').length) {
//At least 1 checkbox is selected within document
}
Be sure to target the correct form, either through document.querySelector
or the document.forms
list on the document object (as seen above). 请务必指定正确的形式,或者通过
document.querySelector
或document.forms
文档对象名单上(如上所示)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.