'select all' checkbox on dynamic HTML checkboxes

Question

I have content being iterated, and then outputted to HTML, from javascript obj data. I am trying to incorporate a check box, that when clicked; will 'select all' or 'check all' of my other checkboxes (these other checkboxes are coming from my JavaScript code, from iterated for loop).

attempt:

function checkAll(checkId){
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) { 
        if (inputs[i].type == "checkbox" && inputs[i].id == checkId) { 
            if(inputs[i].checked == true) {
                inputs[i].checked = false ;
            } else if (inputs[i].checked == false ) {
                inputs[i].checked = true ;
            }
        }  
    }  
}

JS obj data to the HTML content:

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },{
            "Name": "software",
            "Type": "Directory",
            "DateModified": "3/16/2018 10:29:59",
            "Size": "16 KB",
        },{
            "Name": "mmm_data",
            "Type": "Directory",
            "DateModified": "6/27/2018 1:19:29",
            "Size": "3 KB",
        },{
            "Name": "jobs",
            "Type": "Directory",
            "DateModified": "4/27/2018 11:59:59",
            "Size": "3 KB",
        },
];

var string ="";

for (i in json) {
    string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="chk[]"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
};
document.getElementsByClassName('update-data')[0].innerHTML =string

static HTML:

<div class="data-columns">
    <div class="row" id="hd">
        <div class="col-md-15 col-sm-1">
            <input type="checkbox" onclick="checkAll('chk');" >    
        </div>
      <div class="col-md-15 col-sm-4">
        <div id="named" class="sr">Name</div>
        </div>
      <div class="col-md-15 col-sm-3">
        <div id="type" class="sr">Type</div>
        </div>
      <div class="col-md-15 col-sm-3">
          <span id="dated" class="sr">Date Modified</span>
        </div>

      <div class="col-md-15 col-sm-1">
        <span id="size" class="sr">Size</span>
        </div>
    </div>   

    <div class="update-data">

    </div>

</div>

inputs[i].id == checkId what is with that check in the if? — epascarello
– epascarello, Commented Jun 27, 2018 at 17:58
Possible duplicate of How to uncheck a checkbox in pure JavaScript? — Tomasz Lloyd
– Tomasz Lloyd, Commented Jun 27, 2018 at 18:05

Anthony · Accepted Answer · 2018-06-27 18:10:49Z

Your iteration looks mostly good. However, part of your conditional checks that the input has a specific id. Id's are unique, so at most this could only reach one input. If you remove that part you should be good. Also, this will be buggy if the user has selected one or more boxes before selecting the select all button because all this function does is flip them, so whatever ones they have already checked will be unchecked. I'd do something along the lines of:

function checkAll(checked){ // pass true or false to check or uncheck all
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) { 
        if (inputs[i].type == "checkbox") { 
            inputs[i].checked = checked; 
            // This way it won't flip flop them and will set them all to the same value which is passed into the function
        }  
    }  
}

In summary, your big issue is that you are checking the id in the conditional, and only one element on the page can have that id.

Guillaume Georges · Accepted Answer · 2018-06-27 18:32:56Z

There's a few issues in your code :

your first checkbox doesn't have the 'chk' id. I suppose it should.
you're passing the id of the checkbox and then comparing every checkbox's id to this id. And neither of the other checkboxes have an id. So, you're not checking / unchecking anything else but the checkbox you clicked.
you're checking the first checkbox, but then the default action of the click event occurs. And the first checkbox is unchecked.

So, while trying to maintain your logic and existing code, I fixed it by :

removing the inputs[i].id == checkId condition in your if
adding the 'chk' id to the first checkbox
not checking / unchecking the first checkbox. Leave that to the default behaviour of the click event. To do this, add an if to not check / uncheck the 'chk' checkbox.

Full snippet, except styling :

function checkAll(checkId) {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].id != checkId) {
      if (inputs[i].type == "checkbox") {
        if (inputs[i].checked == true) {
          inputs[i].checked = false;
        } else if (inputs[i].checked == false) {
          inputs[i].checked = true;
        }
      }
    }
  }
}

var json = [{
  "Name": "zips",
  "Type": "Directory",
  "DateModified": "6/14/2018 17:22:50",
  "Size": "5 KB",
}, {
  "Name": "presets",
  "Type": "Directory",
  "DateModified": "5/11/2018 7:32:10",
  "Size": "2 KB",
}, {
  "Name": "workflow",
  "Type": "Directory",
  "DateModified": "6/26/2018 10:29:59",
  "Size": "6 KB",
}, {
  "Name": "software",
  "Type": "Directory",
  "DateModified": "3/16/2018 10:29:59",
  "Size": "16 KB",
}, {
  "Name": "mmm_data",
  "Type": "Directory",
  "DateModified": "6/27/2018 1:19:29",
  "Size": "3 KB",
}, {
  "Name": "jobs",
  "Type": "Directory",
  "DateModified": "4/27/2018 11:59:59",
  "Size": "3 KB",
}, ];

var string = "";

for (i in json) {
  string += '<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="chk[]"></div><div class="col-md-15 col-sm-4"><span class="folders">' + json[i].Name + '</span></div><div class="col-md-15 col-sm-3"><span class="directory">' + json[i].Type + '</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">' + json[i].DateModified + '</span></div><div class="col-md-15 col-sm-1"><span class="date-size">' + json[i].Size + '</span></div></div>';
};
document.getElementsByClassName('update-data')[0].innerHTML = string;

<div class="data-columns">
  <div class="row" id="hd">
    <div class="col-md-15 col-sm-1">
      <input type="checkbox" id="chk" onclick="checkAll('chk')" ;>
    </div>
    <div class="col-md-15 col-sm-4">
      <div id="named" class="sr">Name</div>
    </div>
    <div class="col-md-15 col-sm-3">
      <div id="type" class="sr">Type</div>
    </div>
    <div class="col-md-15 col-sm-3">
      <span id="dated" class="sr">Date Modified</span>
    </div>

    <div class="col-md-15 col-sm-1">
      <span id="size" class="sr">Size</span>
    </div>
  </div>

  <div class="update-data">

  </div>

</div>

brandonmack · Accepted Answer · 2021-10-27 19:32:26Z

1

In your code, you are using inputs[i].id == checkId to filter your checkboxes. This means only checkboxes with the ID passed in will toggle. However, element ID's must be unique, so this isn't going to work.

Here's what I would do: use a class such as toggleable that tells your script the box should be changed. You then check for that class on each checkbox when toggling them. Your modified code would look like this:

function checkAll(checkClass){
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) { 
        if (inputs[i].type == "checkbox" && inputs[i].classList.contains(checkClass)) { 
            if(inputs[i].checked == true) {
                inputs[i].checked = false ;
            } else if (inputs[i].checked == false ) {
                inputs[i].checked = true ;
            }
        }  
    }  
}

You then just need to add the same class to any boxes you want to have be effected, and pass that class name in to your function in place of an id.

edited Oct 27, 2021 at 19:32

answered Jun 27, 2018 at 18:09

brandonmack

1982 silver badges8 bronze badges

1 Comment

Yoosaf Abdulla Over a year ago

Yes worked for me. However a typo exists in your code. it should be "classList"

Collectives™ on Stack Overflow

'select all' checkbox on dynamic HTML checkboxes

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related