Javascript根据ID检查/取消选中复选框

Question

我有很多服务器输入复选框。我给了第一个复选框id all。默认情况下，它将被检查。当用户选中其他复选框时，将取消选中标识为all的复选框。如果选中all，则会取消选中其他复选框。为了实现这一点，我制作了代码但没有发生任何事情。

这是我尝试过的。

<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check()" checked/>ALL <br/>
<input type="checkbox" id="servers" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" id="servers" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" id="servers" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" id="servers" value="amp" name="server[]" onChange="check()" />AMP <br/>
</form>


function check(){
    var all = document.getElementById("all"),
        group = document.getElementById("servers");
    if(all.checked == true){
        group.checked == false;
    }elseif(group.checked == true){
        all.checked == false;
    }
}

我希望我的代码能够像THIS一样工作。

由于某些原因，我不想使用jQuery。所以我需要我的代码是纯JS。

任何帮助将不胜感激。

Answer 1

您不能在多个元素上使用相同的ID。

试试这个，请注意我如何将复选框放在div

中

这里有效：http://jsfiddle.net/Sa2d3/

HTML：

<form>
    <div id="checkboxes">
        <input type="checkbox" id="all" value="all" name="all" onChange="check()" />ALL <br/>
        <input type="checkbox" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
        <input type="checkbox" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
        <input type="checkbox" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
        <input type="checkbox" value="amp" name="server[]" onChange="check()" />AMP <br/>
    </div>
</form>

JavaScript的：

document.getElementById('checkboxes').addEventListener('change', function(e) {
    var el = e.target;
    var inputs = document.getElementById('checkboxes').getElementsByTagName('input');

    // If 'all' was clicked
    if (el.id === 'all') {

        // loop through all the inputs, skipping the first one
        for (var i = 1, input; input = inputs[i++]; ) {

            // Set each input's value to 'all'.
            input.checked = el.checked;
        }
    }

    // We need to check if all checkboxes have been checked
    else {
        var numChecked = 0;

        for (var i = 1, input; input = inputs[i++]; ) {
            if (input.checked) {
                numChecked++;
            }
        }

        // If all checkboxes have been checked, then check 'all' as well
        inputs[0].checked = numChecked === inputs.length - 1;
    }
}, false);

修改

根据您在评论中的请求，这里是更新的javascript： http://jsfiddle.net/T5Pm7/

document.getElementById('checkboxes').addEventListener('change', function(e) {
    var el = e.target;
    var inputs = document.getElementById('checkboxes').getElementsByTagName('input');

    // If 'all' was clicked
    if (el.id === 'all') {

        // If 'all' is checked
        if (el.checked) {

            // Loop through the other inputs and removed the check
            for (var i = 1, input; input = inputs[i++]; ) {
                input.checked = false;
            }
        }
    }

    // If another has been clicked, remove the check from 'all'
    else {
        inputs[0].checked = false;
    }
}, false);

Answer 2

您只能为一个元素分配相同的ID。您要做的是给他们class="servers"，然后在JavaScript中使用document.getElementsByClassName("servers");。

Answer 3

您不能为多个HTML元素使用相同的ID。你可以做这样的事情来实现你的要求。

<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check(this, 'a')" checked/>ALL <br/>
<input type="checkbox" id="servers1" value="xampp" name="server[]" onChange="check(this, 's')" />XAMPP <br/>
<input type="checkbox" id="servers2" value="wamp" name="server[]" onChange="check(this, 's')" />WAMP <br/>
<input type="checkbox" id="servers3" value="mamp" name="server[]" onChange="check(this, 's')" />MAMP <br/>
<input type="checkbox" id="servers4" value="amp" name="server[]" onChange="check(this, 's')" />AMP <br/>
</form>

<script>
function check(cb, type){
    var all = document.getElementById("all");

    if (type == "a" && cb.checked){
        var els = document.getElementsByName("server[]");
        for(var i = 0; i < els.length; ++i)
           els[i].checked = false;
    } else if( type == "s" && cb.checked) {
        all.checked = false;
    }
}
</script>

Answer 4

把这个功能

function jvcheck(id,Vale){
 Checkboxesclass = '.group'+id;
 $(Checkboxesclass).each(function() {
    this.checked = Vale;
});

}

然后将此代码放入主复选框

jvcheck('group222',this.checked);

现在选中了具有类group222的所有复选框。