SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <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>

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.
    The only code I hate more than my own is everyone else's.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •