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

Question

我使用 bootstrap 有以下 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”生成的

Answer 1

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

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

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

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

JsFiddle 示例

更新：

为了不依赖 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