CODEWITHSUNDEEP
javascriptjqueryvalidationcheckbox
user4407686
user4407686

Reputation:

How to check whether user has checked at least one checkbox from a group of checkboxes using jQuery/Javascript?

I've following HTML code :

<ul class='select_ul' style="width:100%">
  <li><input name="chk_all_grp_day" id="chk_all_grp_day"  type="checkbox"/><span>All</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span></li><br />
  <li><input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> </li>
  <li><input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span></li>
  <li><input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span></li>
</ul>

Now I've to check using jQuery/Javascript whether user has checked at least one checkbox among the checkboxes above.

If he has not checked any one from the above checkboxes show error message.

How should I do using jQuery/JavaScript?

Please help me.

Thanks.

Upvotes: 1

Views: 893

Answers (3)

user3310334
user3310334

Reputation:

jQuery fiddle
Pure JS fiddle

In jQuery,

you can see how many of the checkboxes from that group are checked, like this:

$("ul input:checked").length > 0

Get all checkboxes which are checked (:checked), $("input:checked")*, and are also descendants of a ul element, $("ul input:checked").

* we don't need [type=checkbox] as only checkboxes/radios can be checked, so it would be redundant in your case, having no radio buttons.

If you have multiple groups like this on a page, you may consider giving each ul "container" an id, and get the checkboxes for one group in this way: 

$("#my-ckeckbox-group-id input:checked")

Here's a JSFiddle which also implements the alert.

In the fiddle, I've used this code:

$("#submitton").click(function(){
    if ($("ul.select_ul input:checked").length > 0){
        $("body").html("Well Done! You checked at least 1 check box!");
    } else {
        alert("You need to check at least one checkbox.");
    }
});

Which also instantiates the error/warning message.

In plain javascript,

just store all your checked checkboxes in an array, and check its length:

document.querySelectorAll("ul input:checked").length > 0;

It's almost identical to the jQuery solution.

Here's a pure javascript JSFiddle, which also implements the alert system.

There is probably an easier way to do this in js, but I don't know it.

Upvotes: 0

jyrkim
jyrkim

Reputation: 2869

i had a look at the docs for :checked selector and this could be used too:

var n = $( "input:checked" ).length;


$("button").click(function() {

  var n = $("input:checked").length;
  
  if (n === 0)
    $("#result").text("You haven't checked any options");
  else
    $("#result").text("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class='select_ul' style="width:100%">
  <li>
    <input name="chk_all_grp_day" id="chk_all_grp_day" type="checkbox" /><span>All</span>
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span>
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> 
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span>
  </li>
  <br />
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> 
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> 
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span>
  </li>
  <li>
    <input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span>
  </li>
</ul>

<button>click</button>

<div id="result"></div>

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

try using:

$('ul input[type=checkbox]:checked').length > 0// then at least one is checked else show error msg.


 $(document).ready(function(){
	   $("#click").click(function(){
		   check();
	   });
   });

   function check(){
if($('ul input[type=checkbox]:checked').length >0){
	   alert($('ul input[type=checkbox]:checked').length);
}else{
alert("error msg");
}
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='select_ul' style="width:100%">
	   <li><input name="chk_all_grp_day" id="chk_all_grp_day"  type="checkbox"/><span>All</span></li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Mon" /><span>Mon</span></li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Tue" /> <span>Tue</span> </li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Wed" /> <span>Wed</span></li><br />
	   <li><input name="val[grp_day][]" type="checkbox" value="Thu" /> <span>Thu</span> </li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Fri" /><span>Fri</span> </li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Sat" /> <span>Sat</span></li>
	   <li><input name="val[grp_day][]" type="checkbox" value="Sun" /><span>Sun</span></li>
	 </ul>
	 <button id="click">click</button>

Upvotes: 1

Related Questions