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

Question

我有很多服务器输入复选框.我给了第一个复选框id all.默认情况下,它将被检查.当用户选中其他复选框时,all将取消选中带有id的复选框.如果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;
    }
}

我想我的代码一样的工作本.

我不想出于某些原因使用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);