选中/取消选中主复选框时，触发其他复选框onclick（）

Question

I have read many other question on SO regarding selecting all checkboxes, but couldn't find one that says how to trigger other checkboxes actions.

I have a main checkbox, when this checkbox is selected all other checkboxes are selected as well. The thing is, other checkboxes have to perform their own action eg disable text fields .etc if they are checked/unchecked. I achieved this by adding onclick to each checkbox. So how to call each checkbox onclick (or make each checkbox to perform their action) if the main checkbox is selected?

After reading about this I have made the following:

      // main checkbox functin that checks/unchecks other checkboxes. 

  function toggleAllCheckBoxes(source , operationType) {
                checkboxes = document.getElementsByName("checkBox" + operationType);
                for each(var checkbox in checkboxes)
                checkbox.checked = source.checked;
               // checkbox.addEventListener('click', true); // this is wrong.
            }


  //this will toggle text fields enabled/disabled
 function toggleDisable(oldTable, newTable , checkBox)
    {
        if( document.getElementById(newTable) !=null)// in case to toggle only old table
        {
            document.getElementById(newTable).disabled = checkBox.checked;
        }

        document.getElementById(oldTable).disabled = checkBox.checked;
    }

main checkbox:

All<input type="checkbox" onClick="toggleAllCheckBoxes(this , '<?=$operationType?>')"/> 

Other checkboxes

  X<input name="checkbox" id="checkbox" onclick="toggleDisable('<?= $originalTableId?>' , '<?= $backupTableId?>' , this )" type="checkbox" /> 

So far this works fine, except, text fields are not being enabled/disabled if main checkbox is selected. Although single checkboxes are able to do that.

Thanks.

Answer 1

I see two issues:

1. There is no for each operator in JavaScript. You'll need to use a normal for loop here.
2. You don't want to set the checked attribute for the checkbox because, as you've seen, that will bypass all event handlers. Instead, call click() on the checkbox and it will be checked (or unchecked) and all event handlers will be called.

That will end up looking like this in toggleAllCheckBoxes :

for(var i = 0; i < checkboxes.length; i++)
    checkboxes[i].click();

Here's a Fiddle to try this code out on: http://jsfiddle.net/z4Ltc/