Question

我使用bootstrap有以下HTML结构。我需要选中一个复选框来选中所有复选框，但我测试过的javascript代码没有用（我不是很擅长javascript）。我认为这些代码不起作用，因为它们没有考虑到＆＃34;活跃的＆＃34;使用bootstrap的类。

以下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由循环生成＆＃34; foreach＆＃34;用PHP

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 example

<强>更新

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

function eventCheckBox() {
  let checkboxs = document.getElementsByTagName("input");
  for(let i = 1; i < checkboxs.length ; i++) {
    checkboxs[i].checked = !checkboxs[i].checked;
  }
}

JsFiddle

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

Fiddle

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

2 个答案: