javascript - Toggle checkboxes on PHP table -
i have table checkbox in table header, used toggle checkboxes below it. i've add javascript function checkbox in header, far selects top checkbox (one checkbox) instead of of them. suggestions or advice on i've done wrong or research?
html table header code:
<thead> <tr> <th><center><input type="checkbox" value="" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"></center></th> <th>sender</th> <th>receiver</th> <th>subject</th> <th>date</th> </tr> </thead>
php table code:
$table .= ' <tr> <td><center><input type="checkbox" id="cb1_1" class="cbgroup1"></center></td> <td><a href="pm_message.php?u='.$log_username.'&pmid='.$pmid.'" onclick="markread(\''.$pmid.'\',\''.$sender.'\')">'.$sender.'</a></td> <td>'.$receiver.'</td> <td>'.$subject.'</td> <td>'.$time.'</td> </tr>';
javascript code:
function togglecheckboxes(master,cn){ var cbarray = document.getelementsbyclassname(cn); for(var = 0; < cbarray.length; i++){ var cb = document.getelementbyid(cbarray[i].id); cb.checked = master.checked; } }
i see 2 issues code.
(probably) using same id multiple dom elements
your php code suggests using loop create checkboxes using same id of them "cb1_1". same @atul here.
improperly selecting checkbox elements since using same id inputs, var cb = document.getelementbyid(cbarray[i].id);
always returns same element. way solve use solution provided @atul
another way rewrite javascript follows :
function togglecheckboxes(master,cn){ var cbarray = document.getelementsbyclassname(cn); for(var = 0; < cbarray.length; i++){ var cb = cbarray[i]; cb.checked = master.checked; } }
your cbarray checkboxes array, redundant (aka useless) call document.getelementbyid(cbarray[i].id)
element when have cbarray[i]
.
Comments
Post a Comment