We help IT Professionals succeed at work.

check or uncheck all boxes inside div on check an unique checkbox

Zado
Zado asked
on
Medium Priority
672 Views
Last Modified: 2012-08-15
Hi Experts,

I need some simple jquery script doing this:
when you click #checkuncheck checkbox, all checkboxes inside div should be checked or unchecked:
<div id="mycheckboxes">
   <input type="checkbox" name="one">
   <input type="checkbox" name="two">
   <input type="checkbox" name="three">
   <input type="text" name="something">
</div>
<input type="checkbox" id="checkuncheck">

Open in new window


Thanks for any help or hint.
Comment
Watch Question

Commented:
Good chance there is a cleaner way to do this....however here is my fiddle...JQuery Check/UnCheck...

Here is the code that I used...
$('#checkuncheck').click(function(e){
    if($(this).is(':checked')){
        $('#mycheckboxes input[type="checkbox"]').each(function(e){
            $(this).attr('checked', 'checked');
        });
    }else{
        $('#mycheckboxes input[type="checkbox"]').each(function(e){
            $(this).attr('checked', false);
        });       
    }        
});

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	$('#checkuncheck').on('click',function(){
		$('input[type=checkbox]','#mycheckboxes').prop('checked',$(this).prop('checked'));
	});
});
</script>
</head>
<body>
<div id="mycheckboxes">
   <input type="checkbox" name="one">
   <input type="checkbox" name="two">
   <input type="checkbox" name="three">
   <input type="text" name="something">
</div>
<input type="checkbox" id="checkuncheck">
</body>
</html>

Open in new window

Commented:
Hielo,
Not to hijack this question, but it will help us all understand!

Can you explain the selector $('input[type=checkbox]','#mycheckboxes') and why prop is better?

That made the code much cleaner than my solution....
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Can you explain the selector $('input[type=checkbox]','#mycheckboxes')
Refer to http://api.jquery.com/jQuery/

Once you read that, it should be obvious that the above is selecting every input that has type="checkbox", but only if it is within some element with id="mycheckboxes"

and why prop is better?
That is explained here: http://api.jquery.com/prop/

Given: <input type="checkbox" name="sport" id="sport" value="Basquetball" />

It has the following attributes: type, name, id, value
However, it has no attribute named "checked", thus alert( $('#sport').attr('checked') )  will give you "undefined". However, it does have a (javascript) property named "checked" which is updated every time the state of the checkbox changes and should evaluate to false in this case: ( alert($('#sport').prop('checked')) ).

As the documentation page states "...The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:  ... if ( $(elem).prop("checked") ) ..."

Commented:
I read the documentation last night but for some reason it wouldn't sink in.

After reading your explanation and going of the docs again it all came together.

Both the ( selector , context ) 'selector' and 'prop' are new ammo added to my arsenal.  

Thanks for the lesson.

-Chris
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Glad to help.

Regards,
Hielo

Author

Commented:
SoupBoy, your script doesn't work for me, sorry.
Hielo, I asked about a simple script and here it is, nice one :)
Thanks a lot guys, I appreciate your help!