• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 506
  • Last Modified:

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

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.
0
Zado
Asked:
Zado
  • 3
  • 3
1 Solution
 
soupBoyCommented:
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

0
 
hieloCommented:
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

0
 
soupBoyCommented:
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....
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
hieloCommented:
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") ) ..."
0
 
soupBoyCommented:
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
0
 
hieloCommented:
Glad to help.

Regards,
Hielo
0
 
ZadoAuthor 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!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now