1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Check All Check Box

         

Balakir

11:25 pm on Apr 5, 2010 (gmt 0)

10+ Year Member



Hi all,

Ive been trying to add a check box added to my for that will check/uncheck all other check boxes.

The amount of check boxes change with how many entries are in my database.

readie on the php forum suggest the code below;

$js = '<script type="text/javascript">

function chek_all() {

var control = document.getElementById("control_box").checked;
if(control) {';
$js_i = '';
$js_e = '';


for($i = 0; $i < $rows; $i++) {
$username = mysql_result($result, $i, "Username");
$formtable .= "\n" . '<tr>
<td style="text-align: center;" ><input type="checkbox" id="' . $username . '_Check" name="' . $username . '_Check" value="1" /></td>
<td style="text-align: center;">' . ucfirst($username) . '</td>
<td style="text-align: center;"><input type="text" name="' . $username . '_Points" value="' . mysql_result($result, $i, "Points") . '" /></td>
<td style="text-align: center;"><input type="text" name="' . $username . '_PointsSinceLastPayOut" value="' . mysql_result($result, $i, "PointsSinceLastPayOut") . '" /></td>
<td style="text-align: center;"><input type="text" name="' . $username . '_DateofLastRun" value="' . mysql_result($result, $i, "DateofLastRun") . '" /></td>
</tr>';

$js_i .= "\n" . 'document.getElementById("' . $username . '_Check").checked = true;';
$js_e .= "\n" . 'document.getElementById("' . $username . '_Check").checked = false;';
}

$js .= $js_i . "\n" . '} else {' . $js_e . "\n" . '}

</script>';


with the check box code as;


<input type="checkbox" id="control_box" name="control_box" onclick="chek_all()" />


Could anyone shed some light on how this would be achieve or what is wrong with the code above?

Many Thanks.

rocknbil

2:37 am on Apr 6, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are many ways, but I do it a little differently. Use the check as a toggle, so if it's checked, it checks all, uncheck it, it unchecks all. What you want to do is pass a reference of the form object **and** the "all" checkbox object to your function. So the number of checks from your php script can be one to infinity (well, within reason) and it doesn't matter what they are ID'ed.

The way it works is it looks for all form checkboxes *except* the onoff check. Sets them to checked or not, depending on the state of onoff.

You could just add the onclick handler to the checkbox, but attaching it via window.onload keeps your html free of inline JS.

Beware, This affects all checkboxes in the form, there many be some you don't want to toggle. If that's the case, you'll have to either make exceptions if it's just a few,

if ((obj.type=='checkbox') && (obj.id != all_id) && (obj.id != 'chk3')) {

or make a list (array) of the ones you want to toggle on and off and only affect those, whichever is less complicated. :-) 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<script type="text/javascript"> 
window.onload=function() {  
 if (document.getElementById('onoff')) { 
 document.getElementById('onoff').onclick=function() { toggleChecks(this.form,this); }; 
 } 
} 
// 
function toggleChecks(form,onoff) { 
 var all_id = onoff.id; 
 var sw = (onoff.checked==true)?true:false; 
 for (j=0;j<form.elements.length;j++) { 
 var obj = form.elements[j]; 
 if ((obj.type=='checkbox') && (obj.id != all_id)) { 
 obj.checked = sw; 
 } 
 } 
} 
</script> 
</head> 
<body> 
<form action="" method="post"> 
<p><input type="checkbox" name="onoff" id="onoff" value="1"> <label for="onoff">All On or Off</label></p> 
<p><input type="checkbox" name="chk1" id="chk1" value="1"> <label for="chk1">One</label></p> 
<p><input type="checkbox" name="chk2" id="chk2" value="2"> <label for="chk2">Two</label></p> 
<p><input type="checkbox" name="chk3" id="chk3" value="3"> <label for="chk3">Three</label></p> 
<p><input type="checkbox" name="chk4" id="chk4" value="4"> <label for="chk4">Four</label></p> 
<p><input type="checkbox" name="chk5" id="chk5" value="5"> <label for="chk5">Five</label></p> 
</body> 
</html>

Balakir

2:35 pm on Apr 13, 2010 (gmt 0)

10+ Year Member



Works a treat XD

Balakir

1:21 pm on May 12, 2010 (gmt 0)

10+ Year Member



Hi Rocknbil,

Is there anyway to stop specific check boxes being included in this check all function?

Cheers,

Bala

rocknbil

6:58 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One way is . . . 


function toggleChecks(form,onoff) {  
 var ignore = new Array('chk2','chk4'); 
 var all_id = onoff.id;  
 var sw = (onoff.checked==true)?true:false;  
 for (j=0;j<form.elements.length;j++) {  
 var ignoreThis=false; 
 var obj = form.elements[j]; 
 for (k=0;k<ignore.length;k++) { 
  if (obj.id==ignore[k]) { ignoreThis=true; break; } 
 } 
 if ((obj.type=='checkbox') && (obj.id != all_id) && ignoreThis==false)) {  
 obj.checked = sw;  
 }  
 }  
}


Untested, but something like that should do . . .

Fotiman

7:28 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ehem...
var ignore = ['chk2', 'chk4'];

(avoids the "new Array" call) ;)

Balakir

11:09 am on May 13, 2010 (gmt 0)

10+ Year Member



Thanks guys works great :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026