基于id的Javascript勾选/取消勾选复选框

Question

基于id的Javascript勾选/取消勾选复选框

5

我有很多服务器输入复选框。我给第一个复选框设置了id为all。默认情况下，它将被选中。当用户勾选其他复选框时，具有id为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;
    }
}

我希望我的代码能像这个那样工作。

由于某些原因，我不想使用jQuery。因此我需要使用纯JS编写代码。

任何帮助将不胜感激。

- Kishore

你不能在你的DOM中抛出多个ID为“server”的元素。 - user229044

我正在使用PHP生成这个，所以我无法让它们拥有唯一的ID。 - Kishore

group.checked == false; all.checked == false. 你本意是要进行一些赋值操作。请将其修改为 group.checked = false; all.checked = false; - Prash

1

@Kishore 你必须这样做。你的页面无效。你不能重复使用ID。如果你在使用PHP，分配唯一的ID应该是更加容易的。 - user229044

4个回答

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>

- mohkhan

这正是我想要的。但问题在于我是用 PHP 生成这个表单，所以我无法让它们拥有唯一的 ID。有没有解决方案？ - Kishore

0

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

- Devin Stewart

-1

将这个函数放置在代码中

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

}

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

jvcheck('group222',this.checked);

现在所有 class 为 group222 的复选框都被选中了。

- KHALID

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samer · Accepted Answer

一个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);