[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Javascript - help with Select/Deselect multiple checkboxes

Posted on 2008-01-27
5
Medium Priority
?
2,251 Views
Last Modified: 2010-04-21
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>
0
Comment
Question by:sabecs
  • 2
  • 2
5 Comments
 
LVL 22

Expert Comment

by:Bill-Hanson
ID: 20756098
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

0
 

Author Comment

by:sabecs
ID: 20756135
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.
0
 
LVL 82

Expert Comment

by:hielo
ID: 20756312
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

0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 20756320
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

0
 

Author Closing Comment

by:sabecs
ID: 31425521
Thanks hielo, its perfect.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

613 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question