We help IT Professionals succeed at work.

Javascript - help with Select/Deselect multiple checkboxes

sabecs
sabecs asked
on
Hi,
I have a script for selecting and deselecting multiple check boxes.
It works if the input name is called "ad_pages" but does not work if  the name is called "ad_pages[]"
Can anyone please advise how I can get it to work with "ad_pages[]"

Thanks..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</style>
<script language="JavaScript" type="text/JavaScript">
function modify_boxes(to_be_checked,total_boxes){

             for ( i=0 ; i < total_boxes ; i++ ){
                     if (to_be_checked){  
                           document.forms[0].ad_pages[i].checked=true;
                     }
                     else{
                           document.forms[0].ad_pages[i].checked=false;
                     }
             }  
}


</script>
</head>

<body> <form>
            <table border="0" align="center" cellpadding="3" cellspacing="3" bgcolor="#F3F3F3">
                         
                         <tr>                            
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="1"  ></label></td>
                              <td width="180"> English</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="2"  ></label></td>
                              <td width="180">Maths</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="3"  ></label></td>
                              <td width="180">Science</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="4"  ></label></td>
                              <td width="180">Technology</td>
          </tr>  
                  </table>                          
             <table width="500" border="0" align="center" cellpadding="5" cellspacing="5">
                              <tr>
                                <td><div align="center">
                                  <input name="CheckAll" type=button class="formbutton" onClick="modify_boxes(true,4)" value="Select All">
                                </div></td>
                                <td><div align="center">
                                  <input name="UnCheckAll" type=button class="formbutton" onClick="modify_boxes(false,4)" value="Deselect All">
                                </div></td>
                              </tr>
</table></form>
</body>
</html>
Comment
Watch Question

You shouldn't use brackets in your names or ids.  Just drop them or use indexes like this:

                              <td width="10"><label><input name="ad_pages_1" type="checkbox" id="ad_pages_1" value="1"  ></label></td>
                              <td width="180"> English</td>
                              <td width="10"><label><input name="ad_pages_2" type="checkbox" id="ad_pages_2" value="2"  ></label></td>
                              <td width="180">Maths</td>
                              <td width="10"><label><input name="ad_pages_3" type="checkbox" id="ad_pages_3" value="3"  ></label></td>
                              <td width="180">Science</td>
                              <td width="10"><label><input name="ad_pages_4 type="checkbox" id="ad_pages_4" value="4"  ></label></td>
                              <td width="180">Technology</td>

If you did this, then your function would be:
function modify_boxes(to_be_checked,total_boxes){
 
             for ( i=0 ; i < total_boxes ; i++ ){
                     if (to_be_checked){
                           eval('document.forms[0].ad_pages_' + i + '.checked=true');
                     }
                     else{
                           eval('document.forms[0].ad_pages_' + i + '.checked=false');
                     }
             }  
} 

Open in new window

Author

Commented:
I need the brackets as I enter the array into MySQL as bellow
$ad_pages = serialize($_POST[ad_pages]);
..... enter into mysql table


Then to update I extract from MySQL table
$adpages = unserialize($row_upd_ads['ad_pages']);
<?php if (is_array($adpages) && (in_array($row_menu['id'], $adpages))) {echo 'checked';} ?>

If I remove the brackets the above does not work.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</style>
<script language="JavaScript" type="text/JavaScript">
function modify_boxes(status){ 
	var chk = document.getElementsByName("ad_pages[]");
	
	for(var i=0,limit=chk.length; i < limit; ++i)
	{
		chk[i].checked = status;
	}
 
} 
 
 
</script>
</head>
 
<body> <form>
            <table border="0" align="center" cellpadding="3" cellspacing="3" bgcolor="#F3F3F3">
                         
                         <tr>                            
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="1"  ></label></td>
                              <td width="180"> English</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="2"  ></label></td>
                              <td width="180">Maths</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="3"  ></label></td>
                              <td width="180">Science</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="4"  ></label></td>
                              <td width="180">Technology</td>
          </tr>   
                  </table>                          
             <table width="500" border="0" align="center" cellpadding="5" cellspacing="5">
                              <tr>
                                <td><div align="center">
                                  <input name="CheckAll" type=button class="formbutton" onClick="modify_boxes(true)" value="Select All">
                                </div></td>
                                <td><div align="center">
                                  <input name="UnCheckAll" type=button class="formbutton" onClick="modify_boxes(false)" value="Deselect All">
                                </div></td>
                              </tr>
</table></form>
</body>
</html>

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
You could also use a Single button to do both:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</style>
<script language="JavaScript" type="text/JavaScript">
function toggle(status){ 
	var chk = document.getElementsByName("ad_pages[]");
	
	for(var i=0,limit=chk.length; i < limit; ++i)
	{
		chk[i].checked = !chk[i].checked;
	}
 
} 
 
 
</script>
</head>
 
<body> <form>
            <table border="0" align="center" cellpadding="3" cellspacing="3" bgcolor="#F3F3F3">
                         
                         <tr>                            
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="1"  ></label></td>
                              <td width="180"> English</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="2"  ></label></td>
                              <td width="180">Maths</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="3"  ></label></td>
                              <td width="180">Science</td>
                              <td width="10"><label><input name="ad_pages[]" type="checkbox" id="ad_pages[]" value="4"  ></label></td>
                              <td width="180">Technology</td>
          </tr>   
                  </table>                          
             <table width="500" border="0" align="center" cellpadding="5" cellspacing="5">
                              <tr>
                                <td><div align="center">
                                  <input name="toggleAll" type=button class="formbutton" onClick="toggle()" value="Toggle All">
                                </div></td>
                              </tr>
</table></form>
</body>
</html>

Open in new window

Author

Commented:
Thanks hielo, its perfect.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.