Bootstrap - Select all checkbox with javascript

Question

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

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

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, complete, and verifiable example. For further information, please refer to the help article regarding how to ask good questions :) — Obsidian Age
– Obsidian Age, Commented Jun 11, 2017 at 22:26

Bob Claerhout · Accepted Answer · 2021-04-27 03:40:07Z

7

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" autocomplete="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

edited Apr 27, 2021 at 3:40

Bob Claerhout

8216 silver badges24 bronze badges

answered Jun 11, 2017 at 22:38

Pablo Cesar Cordova Morales

1,1484 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kokox Over a year ago

It maybe work but, the IDs of my checkboxs are generated by a loop "foreach" in PHP.

Pablo Cesar Cordova Morales Over a year ago

@JorgeAguilar, yes but if you make a little more effort you can change my code for your necesity and so learn more, anyway I updated my code that not depend of the id, if you have more restrictions try to first make a attempt and if you have a problem, ask a question.

Andre.Santarosa · Accepted Answer · 2017-06-12 01:52:57Z

0

Change this line

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

to

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

and

 function toggle(source) {

to

toggle = function(source) {

Fiddle

answered Jun 12, 2017 at 1:52

Andre.Santarosa

1,2802 gold badges11 silver badges26 bronze badges

1 Comment

Kokox Over a year ago

I have tried this code and it works when I do not use the bootstrap. But when I use the bootstrap it stops working and I think it's because Bootstrap dynamically adds the "active" class to the label enclosing the input of the checkbox. That is, when a checkbox is activated, bootstrap adds the "active" class to add the check.

Collectives™ on Stack Overflow

Bootstrap - Select all checkbox with javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related