当选择“任何”时，取消选中组中的所有复选框。复选框被选中用于工作不再工作

Question

我的这个 JS 已经工作了一段时间了，我不知道为什么它现在不再工作了。当选中任意数量的其他复选框时，应该取消选中“Any”（默认选中），并且如果选中“Any”，则取消选中选中的任何内容。

/**
 * 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; 
    }
}

这是 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>

发生的情况是，当选中任何其他框时，Any 不会被选中，但是当它被选中时，它只会取消选中下面的三个框（其值为 Ao、Pa 和 Po）。所有其他的都保持选中状态，当手动取消选中它们时，它们也会取消选中“任何”（如果已选中）。我定制了这个 JS，但我不知道它出了什么问题。预先感谢您的任何帮助。

Answer 1

我想你在文档中的某个地方有重复的ID（可能是“GR”）。尝试使用前缀以避免此问题。

Answer 2

这是一个工作示例。我稍微简化了你的函数参数。我看到的代码不需要第二个和第三个参数，因为它们是常量。

http://jsfiddle.net/srEuM/

鲍勃

Answer 3

你的代码没问题。我在本地测试了一下，没有问题。

Answer 4

您的 javascript 代码必须位于 head 或 body 标记的顶部，但无论哪种方式，您的变量 locations 都需要是全局的，因为每次调用 toggleBoxes 时，< code>locations 将是未定义的。

检查此处的示例： http://jsfiddle.net/ArtBIT/DBanG/