Uncheck all checkboxes in a group when “Any” checkbox is checked used to work not working anymore

Question

I have this JS that has been working fine for a while, and I have no idea why it is not working anymore now. It is supposed to uncheck Any (checked by default) when any number of other checkboxes is checked, and uncheck whatever is checked if Any is checked.

/**
 * Define a set of checkbox groups
 */
var locations = new Array('A', 'P', 'PR', 'GR', 'MC', 'F', 'S', 'L', 'LU', 'E');
/**
 * Checking the "anyId" checkbox clears the rest of the group.  Checking any other clears the "anyId" checkbox.
 */
function toggleBoxes( el, anyId, group ) {
    var i;
    if ( el.id == anyId ) {
        for( i = 0; i < group.length; i++ ){
            var cb = document.getElementById(group[i]);
            cb.checked = false;
        }
    } else {
        var cb = document.getElementById(anyId);
        cb.checked = false; 
    }
}

And this is the HTML

<div class="input">
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='anyLocation' name="ts-in_pr" value="any" type="checkbox" checked>Any</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='A' class="geoloc" name="ts-in_pr[]" value="AR" type="checkbox">Ao</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='P' class="geoloc" name="ts-in_pr[]" value="PI" type="checkbox">Pa</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='PR' class="geoloc" name="ts-in_pr[]" value="PO" type="checkbox">Po</p>      
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='GR' class="geoloc" name="ts-in_pr[]" value="GR" type="checkbox">Gr</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='MC' class="geoloc" name="ts-in_pr[]" value="MC" type="checkbox">MC</p>                                                                  
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='F' class="geoloc" name="ts-in_pr[]" value="FI" type="checkbox">Fi</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='S' class="geoloc" name="ts-in_pr[]" value="SI" type="checkbox">Si</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='L' class="geoloc" name="ts-in_pr[]" value="LI" type="checkbox">Li</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='LU' class="geoloc" name="ts-in_pr[]" value="LU" type="checkbox">Lu</p>
            <p><input onClick='toggleBoxes(this, "anyLocation", locations)' id='E' class="geoloc" name="ts-in_pr[]" value="El" type="checkbox">E</p> 
        </div>

What happens is that Any is unchecked fine when any other box is checked, however when it is checked back it only unchecks the three boxes right below (which values are Ao, Pa, and Po). All others are kept checked, and when they are unchecked manually, they also uncheck Any (if it was checked). I had this JS custom made, and I have no clue what is going wrong with it. Thanks in advance for any help.

Answer 1

Your javascript code must be in the head, or on the top of the body tag, but either way your variable locations needs to be global since every time you call toggleBoxes , locations will be undefined.

Check the example here: http://jsfiddle.net/ArtBIT/DBanG/

Answer 2

I suppose you have duplicate id somewhere in document (possibly "GR"). Try using prefix in order to avoid this problem.

Answer 3

Here is a working example. I have simplified your function parameters a bit. The code that I see doesn't need the second and third parameter since they are constant.

http://jsfiddle.net/srEuM/

Bob

Answer 4

Your code is ok. I tested it locally and no problem.