5

我有很多服务器输入复选框。我给了第一个复选框 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。

任何帮助将不胜感激。

4

4 回答 4

6

您不能在多个元素上使用相同的 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);
于 2013-07-29T02:18:20.407 回答
0

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

于 2013-07-29T02:15:28.747 回答
0

多个 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>
于 2013-07-29T02:18:50.353 回答
-1

把这个函数

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

}

然后将此代码放在您的主复选框中

jvcheck('group222',this.checked);

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

于 2014-01-17T19:50:45.977 回答