I got stuck with a simple piece of functionality which seems not to work on different browsers.
My need is to have a single checkbox (master checkbox) with a function to check/uncheck other checkboxes (children checkboxes). When the master checkbox is clicked, it's own state has to be transferred to a list of other checkboxes. For example: If the master checkbox is not checked and gets clicked (and therefore selected), all the child checkboxes should get selected as well.
The code below works excellent in Firefox 13.0.1, but not in Internet Explorer 9.
All the code below is in the same file:
JavaScript
<script type="text/javascript">
function toggle(source) {
checkboxes = document.getElementsByName('cb[]');
for each(var checkbox in checkboxes)
checkbox.checked = checkbox.checked == true ? false : true;
}
</script>
The Checkbox which is clicked for check and uncheck
<td width="3%"><input name="cb_all" type="checkbox" id="cb_all" onClick="toggle(this)"></td>
One single row
<td><input name="cb[]" type="checkbox" value="<?php echo $user->id;?>" id="cb[]"></td>
I like to believe that the solution should be a simple one, but after spending half a day of searching it would be very nice to have some help. Can you please help me with this one?