Wed. Oct 16th, 2019

Codes

Codes for Coders

Select all checkbox with jQuery and Javascript

1 min read

select all checkbox using javascript or jQuery

I have a list of checkboxes on my form and also a “Select all” option for the checkboxes. I have the following code which works fine on all browsers with jQuery and Javascript.

 

select all checkbox using javascript or jQuery
select all checkbox using javascript or jQuery

With Javascipt:

HTML:


<form name="SelectedItems" onsubmit="return proceed();">
<div id="items">
<b>Select/Unselect All</b><br>
<div style="background:#ccc;">
<input name="checkall" type="checkbox" onclick="SetAllCheckBoxes('SelectedItems','items',this.checked);" /></div><br><br>

<input type="checkbox" name="democheckbox[]" value="Some text description 1"> Bar 1<br>
<input type="checkbox" name="democheckbox[]" value="Some text description 2"> Bar 2<br>
<input type="checkbox" name="democheckbox[]" value="Some text description 3"> Bar 3<br>
<input type="checkbox" name="democheckbox[]" value="Some text description 4"> Bar 4<br><br>
<input type="submit" value="Submit"/>
</div>
</form>

 

Javascipt:


<script type="text/javascript" language="javascript">
function SetAllCheckBoxes(FormName, AreaID, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.getElementById(AreaID).getElementsByTagName('input');
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
</script>

 

Write some validations if required:


<script type="text/javascript" language="javascript">
function proceed(){
var checked=false;
var elements = document.getElementsByName("democheckbox[]");
for(var i=0; i < elements.length; i++){
if(elements[i].checked) {
checked = true;
}
}
if (!checked) {
alert('Please select at least one checkbox.');
}
return checked;
}
</script>

 

With jQuery:

 

Html:


<form action="">
<input type="checkbox" class="toggleit" /><span class="textchange">Select All</span><br/>

<input type="checkbox" class="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" class="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" class="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" class="foo" value="bar4"> Bar 4<br/><br />
<input type="submit" value="Submit" id="submit"/>
</form>

jQuery:


<script type="text/javascript">
$(document).ready(function(e) {
$('.toggleit').click(function(e) {
if($('.toggleit').is(':checked'))
{
$('.foo').each(function(index, element)
{
$(this).attr('checked','checked');
});
$('.textchange').html('Unselect All');
}
else
{
$('.foo').each(function(index, element)
{
$(this).removeAttr('checked');
});
$('.textchange').html('Select All');
}
});
});

</script>

 

Write some validation if required:

 


<script type="text/javascript">
$('#submit').click(function(e) {
if($('input[type=checkbox]:checked').length==0)
{
alert('Please select at least one checkbox');
return false;
}
});

</script>

 

We are Done !

 
Demo imageDownload Code

 

Comment here for any further query.

Thank you.

 

 

1 thought on “Select all checkbox with jQuery and Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *