Can this Jquery function that changes the state of checkboxes be improved?

I am just starting to learn jquery and came up with this bit of code for changing the status of checkboxes.

Can it be improved or is there a better way to achieve the same thing?

The HTML document is generated dynamically so i wouldnt know the names to the Id, classes and element names. The HTML document contains groups of checkboxes. Each group has a master checkbox and a number of child checkboxes.

  • When the master checkbox is clicked, all its child checkboxes are checked
  • When any child checkbox is clicked, its corresponding master is also checked
  • When a child is unchecked, its corresponding master will be unchecked if there is no other checked child in the same group.

This is my first attempt at jquery so please feel free to suggest improvements. I wont be suprised if the same thing can be achieved with a one liner :cool:


<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<SCRIPT language="javascript">
		
		$(document).ready(function() {		
			$('input[type=checkbox]').click(function() {
				if($(this).attr('name')=='master'){
					$('.' + $(this).attr('class')).attr('checked', this.checked);	
				}
				if($(this).attr('name')=='child'){
				
					var childChecked = false;
					
					$('.' + $(this).attr('class')).each(function(){
						if (this.checked && this.name=="child"){
							childChecked=true;
						}						
					});
										
					if (childChecked==false){
						$('.' + $(this).attr('class')).each(function(){
							if (this.name=='master'){
								this.checked = childChecked;	
							}						
						});
					}else{
						$('.' + $(this).attr('class')).each(function(){
							if (this.name=='master'){
								this.checked = childChecked;	
							}						
						});
					}
										
				}				
			});
		 }); 		
		
    </script>

    <title>Multiple Checkbox Select/Deselect - DEMO</title>
    </head>
    <body>
	
	<a href="">Link</a>
	
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
    <table border="1">
		<tr>
			<th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
			<th>Master</th>
			<th>Rating</th>
		</tr>
		<tr>
			<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
			<th>Child</th>
			<th>Rating</th>
		</tr>
		<tr>
			<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
			<th>Child</th>
			<th>Rating</th>
		</tr>			
    </table>     
	<table border="1">
		<tr>
			<th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
			<th>Master</th>
			<th>Rating</th>
		</tr>
		<tr>
			<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
			<th>Child</th>
			<th>Rating</th>
		</tr>
		<tr>
			<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
			<th>Child</th>
			<th>Rating</th>
		</tr>			
    </table>     
	
    </BODY>
    </HTML>

Do you have control over the HTML? There are several things incorrect about it such as; multiple ids and names that will result in the incorrect data being sent to the server. Not to mention more convoluted JavaScript.

Hi yes i generate the HTML dynamically. The only bits i dont have control of in the HTML is the ‘name’ element on each of the checkboxes. All the master checkboxes will have the same name and all the child checkboxes will also have the same name. The list of checkboxes are sent to the server as an array that is why they all have the same name.

The ‘id’ will not be the same. Each checkbox is associated with a sequence number so these will be unique.

Is the Jquery correct? What is convoluted javascript?

Thanks in advance