JS checkbox.checked vs手动检查

I have a page which is paginated to 100 results per page by php with checkboxes beside each. I have three functions: one to select all, one to save what was checked, and one to restore what was checked.

I don't understand why my toggle function does not work with the other two.
If I click select all (which performs a toggle()) the checked values are not saved; however, if I click them by hand they do get saved across pagination.

I am assuming that I have to do something along the lines of persistCheckBox(checkboxes[i].checked) to the last line of my toggle function --which I tried and it did not work; Can someone explain why?

   function toggle(source) {
       checkboxes = document.getElementsByName('multi_mag[]');
       for (var i = 0, n = checkboxes.length; i < n; i++) {
           checkboxes[i].checked = source.checked;
       }
   }

   function restorePersistedCheckBoxes() {
       var aStatus = getPersistedCheckStatus();
       for (var i = 0; i < aStatus.length; i++) {
           var aPair = aStatus[i].split(':');
           var el = document.getElementById(aPair[0]);
           if (el) {
               el.checked = aPair[1] == '1';
           }
       }
   }

   function persistCheckBox(el) {
       var found = false;
       var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
       var aStatus = getPersistedCheckStatus();
       for (var i = 0; i < aStatus.length; i++) {
           var aPair = aStatus[i].split(':');
           if (aPair[0] == el.id) {
               // State for this checkbox was already present; replace it
               aStatus[i] = currentStateFragment;
               found = true;
               break;
           }
       }
       if (!found) {
           // State for this checkbox wasn't present; add it
           aStatus.push(currentStateFragment);
       }
       // Now that the array has our info stored, persist it
       setPersistedCheckStatus(aStatus);
   }

Neither the click nor the change events are triggered when changing the checked value programmatically.

Since you tagged your question with jQuery, I will demonstrate using some jQuery code.

It is unclear from your code how you do your persistent storage or what is your HTML structure, so the code will show a general approach.

A word of advice, though: I strongly suggest that you remove styling code out of the structure and use CSS and avoid inline event handling. Pretty much everything that you want to accomplished can be done more cleanly from outside the HTML.

I will be suing a form with several checkboxes, the first of which will change the other checkboxes' state.

HTML:

<form id="boxes">
    <input type="checkbox" id="all" name="all" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    ...
    <input type="checkbox" name="multi_mag[]" class="normal" />
</form>

Javascript:

In this example, all of the 'normal' checkboxes have some common property (in this case, I decided on a class), that allow event delegation.

$('#boxes').delegate('.normal', 'change', function (e) {
    console.log('changed', e.target.checked);
});

This code sets a function to run every time a checkbox changes, corresponding to your persistCheckBox() method.

Next, the equivalent of your toggle() function:

$('#all').change(function (e) {
    var checked = e.target.checked;
    console.log('changed checkall box: ', checked);
    checkboxes = document.getElementsByName('multi_mag[]');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = checked;
        $(checkboxes[i]).change();
    }
});

It is executed whenever the "main" checbox changes its state. All of the checkboxes are iterated, their values are changed and the change event is triggered, which causes each to run the aforementioned function.

You can apply this method to your (cleaned) code, and the persistence should be maintained.

Example jsFiddle (check your console for the activity log).

This little piece of code can check / uncheck a checkbox, and will trigger any associated events.

$('input[type=checkbox]').trigger('click');

It could help maybe

I fixed this by adding I fixed this by adding "persistCheckBox(checkboxes[i]);" to the last line of the toggle() function. @MasterAM I appreciate your critiques and will be using them to optimize my code. I also appreciate the JQuery solution you provided.