Bootstrap - 使用 javascript 选择所有复选框答案

【问题标题】：Bootstrap - Select all checkbox with javascriptBootstrap - 使用 javascript 选择所有复选框
【发布时间】：2017-06-11 22:24:14
【问题描述】：

我使用引导程序具有以下 HTML 结构。我需要选择一个复选框来选择所有复选框，但我一直在测试的 javascript 代码不起作用（我不太擅长 javascript）。我认为这些代码不起作用，因为它们没有考虑使用引导程序的“活动”类。

以下 javascript 不适用于我：

    <script>
    function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] != source)
    checkboxes[i].checked = source.checked;
    }
    }
    </script>

测试

    <form action="" method="post" class="form-horizontal">
        <fieldset>
            <legend>EXAMPLE</legend>
            <div class="form-group rowauto" data-toggle="buttons">
                <label for="selectall">SELECT/UNSELECT ALL:</label>
                <label class="btn btn-success active checkboxkox">
                    <input type="checkbox" id="selectall" name="selectall" autocomplete="off" checked>
                    <span class="glyphicon glyphicon-ok"></span>
                </label>
            </div>
        </fieldset>
        <fieldset>
            <div class="row rowauto">
                <div class="col-sm-1">
                    <div class="form-group rowauto" data-toggle="buttons">
                        <label class="btn btn-success active checkboxkox">
                            <input type="checkbox" id="check_1" name="check_1" autocomplete="off" checked>
                            <span class="glyphicon glyphicon-ok"></span>
                        </label>
                    </div>                  
                </div>
            </div>
            <div class="row rowauto">
                <div class="col-sm-1">
                    <div class="form-group rowauto" data-toggle="buttons">
                        <label class="btn btn-success active checkboxkox">
                            <input type="checkbox" id="check_2" name="check_2" autocomplete="off" checked>
                            <span class="glyphicon glyphicon-ok"></span>
                        </label>
                    </div>                  
                </div>
            </div>
        </fieldset>
    </form>

我的复选框的 ID 是由 PHP 中的“foreach”循环生成的

【问题讨论】：

请更新您的问题，以便它显示您尝试过的所有相关 JavaScript 代码，展示您在 @987654321 中遇到的特定问题@。如需更多信息，请参阅有关how to ask good questions 的帮助文章：）

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

尝试使用您的 Html，您可以在复选框中添加事件onclick 以选择/取消选择所有复选框：

<input type="checkbox" id="selectall" name="selectall" autocomplete="off" checked onclick="eventCheckBox()">

并在您的 javascript 中使用属性 checked：

function eventCheckBox() {
  let checkbox1 = document.getElementById("check_1");
  checkbox1.checked = !checkbox1.checked;
  
  let checkbox2 = document.getElementById("check_2");
  checkbox2.checked = !checkbox2.checked;
}

JsFiddle example

更新：

要不依赖于 id 名称，您可以使用：

function eventCheckBox() {
  let checkboxs = document.getElementsByTagName("input");
  for(let i = 0; i < checkboxs.length ; i++) { //zero-based array
    checkboxs[i].checked = !checkboxs[i].checked;
  }
}

JsFiddle

【讨论】：

它可能有效，但是我的复选框的 ID 是由 PHP 中的“foreach”循环生成的。
@JorgeAguilar，是的，但是如果您付出更多努力，您可以根据需要更改我的代码，因此可以了解更多信息，无论如何，如果您有更多限制，我更新了不依赖于 id 的代码尝试先尝试，如果有问题，请提出问题。

【解决方案2】：

改变这一行

 <input type="checkbox" id="selectall" name="selectall" autocomplete="off" checked>

到

<input type="checkbox" id="selectall" name="selectall" onclick="toggle(this)" autocomplete="off" checked>

和

 function toggle(source) {

到

toggle = function(source) {

Fiddle

【讨论】：

我已经尝试过这段代码，当我不使用引导程序时它可以工作。但是当我使用引导程序时它停止工作，我认为这是因为引导程序动态地将“活动”类添加到包含复选框输入的标签中。也就是当一个checkbox被激活时，bootstrap会添加“active”类来添加check。