Javascript检查/取消选中基于id的复选框 [英] Javascript check / uncheck checkboxes based on id

问题描述

我有许多服务器输入复选框。我给了第一个复选框id all 。默认情况下会被选中。当用户选中其他复选框时，将取消选中id all 的复选框。如果选中 all ，其他复选框将被取消选中。为了这个发生，我做了代码，但没有发生。

I have many server input checkboxes. I have given the first checkbox the id all. By default it will be checked. When the user checks other checkboxes, then checkbox with id all will be unchecked. And if all is checked other checkboxes will be unchecked. For this to happen i made the code but nothing is happening.

这是我尝试过的。

<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。

I dont want to use jQuery for some reasons. So i need my code to be in pure JS.

任何帮助将不胜感激。

推荐答案

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

You can't use the same ID on multiple elements.

请尝试此操作，注意我如何将复选框放置在 div

Try this, notice how I placed the checkboxes in a 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：

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 /

Based on your request in the comment here is the updated 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);

这篇关于Javascript检查/取消选中基于id的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！