Resolved Fire group of checkboxes at once

[snakehill]

I have a group of checkboxes that can all be checked at once via the first checkbox which toggles all. However, each of those checkboxes include an onclick-this function (also tried with onchange), but it does not fire at the toggling. How to make this happen?

<script>
function checkall(n) {
 var togglebox = document.getElementsByName('toggle')[n];
 var boxes = document.getElementById('Categories').getElementsByTagName('div')[n].getElementsByTagName('input');

 for (var i = 0; i < boxes.length; i++) {
  if (togglebox.checked == true) {
   boxes[i].checked = true;
  }
  else {
   boxes[i].checked = false;
  }
 }
}

function category(o) {
 if (o.checked == true) {
  alert (o.value);
 }
}
</script>

<div id="Categories">
 <div>
  <input type="checkbox" name="toggle" onclick="checkall(0);">Sections
  <input type="checkbox" name="category" value="1" onclick="category(this)">Section 1
  <input type="checkbox" name="category" value="2" onclick="category(this)">Section 2
  <input type="checkbox" name="category" value="3" onclick="category(this)">Section 3
 </div>
</div>

Much appreciated! Thanks!

[Philip M]

Adapt this to your needs:-

<div id="mydiv1">
A<input type="checkbox"><br>
B<input type="checkbox"><br>
C<input type="checkbox"><br>
D<input type="checkbox"><br>
E<input type="checkbox"><br> <br>
</div>

<script type="text/javascript">

function checkByParent(aId, aChecked) {
var collection = document.getElementById(aId).getElementsByTagName("input");
for (var x=0; x<collection.length; x++) {
if (collection[x].type.toLowerCase() == "checkbox") {
collection[x].checked = aChecked;
}
}
}

function toggle(aId) {
var collection = document.getElementById(aId).getElementsByTagName("input");
for (var x=0; x<collection.length; x++) {
if (collection[x].type.toLowerCase() == "checkbox") {
if (collection[x].checked) {
collection[x].checked = false;
}
else {collection[x].checked = true}
}
}
}

//checkByParent("mydiv1", true);  // check all boxes initially

</script>

<input type="button" value="Check All" onclick="checkByParent('mydiv1', true)">
<input type="button" value="Uncheck All" onclick="checkByParent('mydiv1', false)">
<input type="button" value="Toggle All" onclick="toggle('mydiv1')">

“I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

[snakehill]

But when adding any onclick or onchange functions to the mydiv1 checkboxes, these don't fire either, they merely get checked but any of the functions they carry don't run.

[Philip M]

I am not sure that I understand that. onclick only works onclick (an actual click), not if the checkmark is changed programatically. onchange does not apply to checkboxes. I think you are trying to do something which cannot be achieved.

You will have to use a button and a separate function to fire all the currently checked checkboxes if that is what you want.

[snakehill]

Hmm.. any way you recommend for doing that in case of the code in the main post? You won't have to code it for me but I think I need a push in the right direction as for that.

Thank you!!

[Philip M]

Originally Posted by snakehill

Hmm.. any way you recommend for doing that in case of the code in the main post? You won't have to code it for me but I think I need a push in the right direction as for that.

Thank you!!

As I say, it is not possible to to fire a function as though onclick when the state of the checkbox has been changed programatically.

You will have to use a button and a separate function to fire all the currently checked checkboxes if that is what you want.

[Logic Ali]

Originally Posted by snakehill

I have a group of checkboxes that can all be checked at once via the first checkbox which toggles all.

Due to an incorrect starting index, the code as shown does not do that.

However, each of those checkboxes include an onclick-this function (also tried with onchange), but it does not fire at the toggling. How to make this happen?

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>TEST</title>
</head>
<body>

<script>

function checkall(n) 
{
 var togglebox = document.getElementsByName('toggle')[n];
 var boxes = document.getElementById('Categories').getElementsByTagName('div')[n].getElementsByTagName('input');

 for( var i = 1; boxes[ i ]; i++ ) 
   if( ( boxes[i].checked = togglebox.checked ) )
     boxes[i].onclick();
}

function category(o) {
 if (o.checked == true) {
  alert (o.value);
 }
}
</script>

<div id="Categories">
 <div>
  <input type="checkbox" name="toggle" onclick="checkall(0);">Sections
  <input type="checkbox" name="category" value="1" onclick="category(this)">Section 1
  <input type="checkbox" name="category" value="2" onclick="category(this)">Section 2
  <input type="checkbox" name="category" value="3" onclick="category(this)">Section 3
 </div>
</div>
</body>

</html>

[felgall]

The onclick for the checkbox that checks all the other checkboxes simply needs to call all the functions that the other onclicks call when the checkboxes are clicked individually.

[snakehill]

Brilliant! Thanks a whole bunch!!!