Bootstrap Javascript选中具有相同ID的所有复选框

erhoui1w 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(195)

我有以下

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/32077345/javascript-check-all-checkboxes-with-same-id

3条答案

按热度按时间

xn1cxnb41#

正如在注解中指出的，ID必须是唯一的，所以如果愿意，可以将它们改为类。

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

此外，请移除这些内嵌事件行程常式。

赞(0）回复(0）举报 2022-12-07

b0zn9rqh2#

如前所述，网页上的每个元素都应该有一个唯一的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

赞(0）回复(0）举报 2022-12-07

bgibtngc3#

ID是唯一的，它允许你用getElementById函数得到一个元素，而其他getElementsByXXX函数返回一个元素列表（因此getElements中的s）。
当你检索POST数据（通过PHP或其他服务器语言）时，你需要检查变量name属性是否被设置。如果是，那么复选框被选中了。像你这样有多个同名的复选框是行不通的。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;
}

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap Javascript选中具有相同ID的所有复选框

3条答案

相关问题

热门标签

最新问答