Bootstrap - 使用 javascript 選擇所有復選框

Question

我使用引導程序具有以下 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

嘗試使用您的 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 示例

更新：

為了不依賴於 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;
  }
}

提琴手

Answer 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) {

小提琴