Javascript检查具有相同ID的所有复选框

Question

我有以下

<form class="form-inline" role="form">
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' value="">ciao</span><br>
                    </label>

        </div>
    </div>
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
        </div>
    </div>
</form>

通过单击第一个复选框，ID 为“check21”的第二个 div 中的所有复选框都会自动被选中。

<script>
    function handleChange(cb) {
        if(cb.checked == true) {
           document.getElementById("check21").checked = true;
           alert('eyaicecold');
        } else {
           alert('Message 2');
           var x = document.getElementById("check21").disabled= false;
        }
    }
</script>

我使用了以下脚本，但仅适用于第一个脚本。我想使用 id，因为名称和值将用于通过表单发送 sql 请求。

Answer 1

正如 cmets 中所指出的，ID 必须是唯一的，因此您可以根据需要将它们更改为类。然后你可以使用这个 jQuery：

$('input.check11').click(function(){
  $('input.check21').prop('checked',this.checked)
})

bootply example

另外，删除那些内联事件处理程序。

Answer 2

如前所述，网页上的每个元素都应该有一个唯一的 ID。

但是，它仍然可以使用 querySelectorAll 来完成，如下所示：

function handleChange(cb) {
    var allCB = document.querySelectorAll("input[id='check21']");
    for(var i=0; i< allCB.length; i++){
        allCB[i].checked=true;
    }
}

Here is the JSFiddle demo

Answer 3

ID 背后的理念是它们是独一无二的。它允许您使用 getElementById 函数获取单个元素，而其他 getElementsByXXX 函数返回元素列表（因此 getElements 中的 s）。

当您检索 POST 数据时（通过 PHP 或其他服务器语言），您需要检查是否设置了名称属性等调用的变量。如果是，则选中该复选框。像你一样拥有多个同名的复选框是行不通的。 This other SO answer 很好地解释了如何使用复选框中的 POST 数据。

如果您选择使用name="something[]" 表示法，那么您何时可以选中第二个 div 的所有框：

var checkboxes = myDiv.getElementsByName("something[]");
for(var i=0; i < checkboxes.length; ++i) {
    checkboxes[i].checked = true;
}

您也可以使用类，但我认为这只会使代码膨胀，而您已经需要为表单使用名称。