I have the following HTML structure using bootstrap. I need to select a checkbox to select all the checkboxes but the javascript codes I've been testing have not worked (I'm not very good at javascript). I think these codes do not work because they do not take into account the "active" class that uses bootstrap.

The following javascript not worked for me:

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

Test

    <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" autoplete="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" autoplete="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" autoplete="off" checked>
                            <span class="glyphicon glyphicon-ok"></span>
                        </label>
                    </div>                  
                </div>
            </div>
        </fieldset>
    </form>

The IDs of my checkboxs are generated by a loop "foreach" in PHP

I have the following HTML structure using bootstrap. I need to select a checkbox to select all the checkboxes but the javascript codes I've been testing have not worked (I'm not very good at javascript). I think these codes do not work because they do not take into account the "active" class that uses bootstrap.

The following javascript not worked for me:

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

Test

    <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" autoplete="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" autoplete="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" autoplete="off" checked>
                            <span class="glyphicon glyphicon-ok"></span>
                        </label>
                    </div>                  
                </div>
            </div>
        </fieldset>
    </form>

The IDs of my checkboxs are generated by a loop "foreach" in PHP

• javascript
• jquery
• html
• twitter-bootstrap
• checkbox

• 2 Please update your question so that it shows all relevant JavaScript code that you have tried, showcasing the specific problem you are facing in a minimal, plete, and verifiable example. For further information, please refer to the help article regarding how to ask good questions :) – Obsidian Age Commented Jun 11, 2017 at 22:26

2 Answers 2

Trying to use your Html, you can add the event onclick in the checkbox to select/unselect all checkbox:

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

And use the property checked in your javascript:

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

JsFiddle example

Update:

To not depend of the id name, you can use:

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

Change this line

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

to

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

and

 function toggle(source) {

to

toggle = function(source) {

Fiddle