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; });
Something along the following lines:
var formNodes = document.checks.getElementsByTagName('input');
for (var i=0;i<formNodes.length;i++) {
/* If one is true set a variable to true and exit the loop */
}
Stack overflow post Here
Cheers,
Truez
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.
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.
This answer returns an array of checked inputs using 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.
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);
If you're using a supported browser , you can leverage the :checked pseudo selector for a really succinct check. 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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.