<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" class="checkall"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
If you want to accomplish this using pure Javascript, you can use the following code :
<!-- Your Script -->
<script type='text/javascript'>
//Checks all elements with the same name attribute (generated by your RadioButtonList)
function checkAll(element){
//This will get each of your elements with the name of your current checkbox
var inputs = document.getElementsByName(element.name);
//Determine if all elements should be checked or unchecked
var checkAll = element.checked;
//Check boxes accordingly
for(var i = 0; i < inputs.length; i++){
inputs[i].checked = checkAll;
}
};
</script>
Alternatively, if you wanted to use jQuery, you could use the .siblings() selector to match any elements with the same name (which would be generated from a RadioButtonList) and checked them accordingly :
<!-- jQuery Reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Necessary Script -->
<script type='text/javascript'>
$(document).ready(function(){
//When a check all element is clicked
$('.checkall').click(function(){
//Select all siblings to this element with matching names and check check them accordingly
$(this).siblings('input[name='+$(this).prop('name')+']').prop('checked',$(this).prop('checked'));
});
});
</script>
<!-- Markup -->
<body>
<fieldset>
<input class='checkall' type="checkbox" name='list1'>Check all
<input type="checkbox" name='list1'> Checkbox
<input type="checkbox" name='list1'> Checkbox
<input type="checkbox" name='list1'> Checkbox
</fieldset>
<br />
<fieldset>
<input class='checkall' type="checkbox" name='list2'>Check all
<input type="checkbox" name='list2'> Checkbox
<input type="checkbox" name='list2'> Checkbox
<input type="checkbox" name='list2'> Checkbox
</fieldset>
</body>
Setting an attribute (using the .attr() method) doesn't necessary always work across browsers and can often yield inconsistant results cross-platform.
This was one of the reasons jQuery introducted the .prop() method that was designed specifically to use handle values that often resulted in inconsistant behavior with .attr().
var c = document.getElementById('<%=chkUserLevels.ClientID %>').getElementsByTagName("input");
// var chkListinputs = chkListModules.getElementsByTagName("input");
{
for (var i = 0; i < c.length; i++) {
if (c[i].type.toLowerCase() == 'checkbox' && c[i].checked) {
return (true);
}
}
alert("Please select at least one User Type to processed..");
return (false);
}
aparitala
Member
13 Points
83 Posts
How to check /unchecll all check boxes
Feb 05, 2013 05:03 PM|LINK
Hi ,
How to Check all/Uncheck all items in a checkbox list using javascript can you please help?
moises.dl
Contributor
2046 Points
628 Posts
Re: How to check /unchecll all check boxes
Feb 05, 2013 05:18 PM|LINK
http://briancray.com/posts/check-all-jquery-javascript
<fieldset> <!-- these will be affected by check all --> <div><input type="checkbox" class="checkall"> Check all</div> <div><input type="checkbox"> Checkbox</div> <div><input type="checkbox"> Checkbox</div> <div><input type="checkbox"> Checkbox</div> </fieldset> <fieldset> <!-- these won't be affected by check all; different field set --> <div><input type="checkbox"> Checkbox</div> <div><input type="checkbox"> Checkbox</div> <div><input type="checkbox"> Checkbox</div> </fieldset>$(function () { $('.checkall').click(function () { $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked); }); });MOIhawk
Rion William...
All-Star
26574 Points
4414 Posts
Re: How to check /unchecll all check boxes
Feb 05, 2013 05:48 PM|LINK
If you want to accomplish this using pure Javascript, you can use the following code :
<!-- Your Script --> <script type='text/javascript'> //Checks all elements with the same name attribute (generated by your RadioButtonList) function checkAll(element){ //This will get each of your elements with the name of your current checkbox var inputs = document.getElementsByName(element.name); //Determine if all elements should be checked or unchecked var checkAll = element.checked; //Check boxes accordingly for(var i = 0; i < inputs.length; i++){ inputs[i].checked = checkAll; } }; </script>and this associated markup :
<body> <fieldset> <div><input type="checkbox" name='list1' onclick='checkAll(this);'> Check All</div> <div><input type="checkbox" name='list1'> Checkbox</div> <div><input type="checkbox" name='list1'> Checkbox</div> <div><input type="checkbox" name='list1'> Checkbox</div> </fieldset> <br /> <fieldset> <div><input type="checkbox" name='list2' onclick='checkAll(this);'> Check All</div> <div><input type="checkbox" name='list2'> Checkbox</div> <div><input type="checkbox" name='list2'> Checkbox</div> <div><input type="checkbox" name='list2'> Checkbox</div> </fieldset> </body>Example
Alternatively, if you wanted to use jQuery, you could use the .siblings() selector to match any elements with the same name (which would be generated from a RadioButtonList) and checked them accordingly :
<!-- jQuery Reference --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- Necessary Script --> <script type='text/javascript'> $(document).ready(function(){ //When a check all element is clicked $('.checkall').click(function(){ //Select all siblings to this element with matching names and check check them accordingly $(this).siblings('input[name='+$(this).prop('name')+']').prop('checked',$(this).prop('checked')); }); }); </script> <!-- Markup --> <body> <fieldset> <input class='checkall' type="checkbox" name='list1'>Check all <input type="checkbox" name='list1'> Checkbox <input type="checkbox" name='list1'> Checkbox <input type="checkbox" name='list1'> Checkbox </fieldset> <br /> <fieldset> <input class='checkall' type="checkbox" name='list2'>Check all <input type="checkbox" name='list2'> Checkbox <input type="checkbox" name='list2'> Checkbox <input type="checkbox" name='list2'> Checkbox </fieldset> </body>Example using jQuery
dhorne41
Member
15 Points
9 Posts
Re: How to check /unchecll all check boxes
Feb 05, 2013 08:46 PM|LINK
Just want to note that setting 'checked' to a boolean value doesn't work in all browsers, you should use the literal value 'checked'. You can do:
$(function () { $('.checkall').click(function () { $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked ? 'checked' : null); }); });OR
$(function () { $('.checkall').click(function () { var self = this; $(this).parents('fieldset:eq(0)').find(':checkbox').each(function() { if(self.checked) { $(this).attr('checked', 'checked'); } else { $(this).removeAttr('checked'); } }); }); });Rion William...
All-Star
26574 Points
4414 Posts
Re: How to check /unchecll all check boxes
Feb 05, 2013 08:56 PM|LINK
As dhorne41 mentioned and I'll contribute to,
Setting an attribute (using the .attr() method) doesn't necessary always work across browsers and can often yield inconsistant results cross-platform.
This was one of the reasons jQuery introducted the .prop() method that was designed specifically to use handle values that often resulted in inconsistant behavior with .attr().
You can find out more about this in this Stack Overflow discussion.
dhorne41
Member
15 Points
9 Posts
Re: How to check /unchecll all check boxes
Feb 05, 2013 09:05 PM|LINK
You're correct Rion. I actually had a note at the top of my post about the other suggestions being correct but for some reason it got cropped off.
roopeshreddy
All-Star
20135 Points
3323 Posts
Re: How to check /unchecll all check boxes
Feb 06, 2013 04:03 AM|LINK
Hi,
If you are looking for ASP.NET Checkbox list, then check this article - http://www.dotnetcurry.com/ShowArticle.aspx?ID=77
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
aparitala
Member
13 Points
83 Posts
Re: How to check /unchecll all check boxes
Feb 06, 2013 02:27 PM|LINK
var c = document.getElementById('<%=chkUserLevels.ClientID %>').getElementsByTagName("input"); // var chkListinputs = chkListModules.getElementsByTagName("input"); { for (var i = 0; i < c.length; i++) { if (c[i].type.toLowerCase() == 'checkbox' && c[i].checked) { return (true); } } alert("Please select at least one User Type to processed.."); return (false); }Thanks all this one helps...