How to bind click event handler for multiple checkboxes?

Question

How to add the border of the div that currently checked checkbox is in. As a base I used code from an online course that actually went through very similar function. Unfortunately, after the changes, it is not working.

The HTML

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

And Javascript file

function preparePage() {
  document.getElementsByClassName("highlight").onclick = function() {
    if (document.getElementsByClassName("highlight").checked) {
      // use CSS style to show it
      document.getElementsByClassName("box").style.border = "thick solid #0000FF";
    } else {
      // hide the div
      document.getElementsByClassName("box").style.border = "none";
    }
  };
  // now hide it on the initial page load.
  document.getElementsByClassName("box").style.border = "none";
}

window.onload = function() {
  preparePage();
};

Also, here is the jsfiddle link: https://jsfiddle.net/ohth2n7e/1/

Thank you for your time!

Contrary to `getElementById`, `getElementsByClassName` returns an array of elements (since multiple elements can have the same class). — Aaron, Feb 01 '17 at 10:21

L. Vadim · Answer 1 · 2017-02-01T11:40:04.543

Working all. Check all. and single click

document.getElementById('highlightall').onclick = function(){
var border = document.getElementsByClassName("highlight");
   for(i=0;i < border.length; i++)
   {
    border[i].checked = (this.checked)? true : false;
   }
}
  var border = document.getElementsByClassName("highlight");
  for(i=0;i < border.length; i++)
  {
  border[i].addEventListener("click", function() {
    if (this.checked) {
       this.parentElement.style.border = "thick solid #0000FF";
    } else {
       this.parentElement.style.border = "none";
    }
  });
  
}

.checkboxall {
background:#222;
padding:10px;
color:#fff;
}

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 11:54

document.getElementsByClassName returns a NodeList and you need to bind click event handler for each one.

For setting checkbox border you need to use outlineColor and outlineStyle properties.

For binding event handlers you have to use a for loop and attach a event handler for each checkbox DOM element.

var checkboxes=document.getElementsByClassName("highlight");
for(var i=0;i<checkboxes.length;i++){
    checkboxes[i].onclick=function(){
      console.log("Current index: "+i);
      if (checkboxes[i].checked) {
        checkboxes[i].style.outlineColor = "red";
        checkboxes[i].style.outlineStyle = "solid";
      } else {
        checkboxes[i].style.outlineColor = "none";
        checkboxes[i].style.outlineStyle = "none";
      }
    };
}

.checkboxall {
background:#222;
padding:10px;
color:#fff;}

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

But if you look, it appears errors. That's because when page loads, the preparePage is invoked and it created a context. When you click a checkbox element, the last value saved for i variable will be 3(like in the above snippet).

Why this behaviour?

Because there was only one scope within the preparePage() function, the i variable is only bound to a value within that scope. In other words, each time the loop changes the value of i, it changes it for everything that references it within that scope.

After the loop finished the i variable has value 3.

That was being said, one solution is to use let keyword.

var checkboxes=document.getElementsByClassName("highlight");
for(let i=0;i<checkboxes.length;i++){
    checkboxes[i].onclick=function(){
      if (checkboxes[i].checked) {
        checkboxes[i].style.outlineColor = "red";
        checkboxes[i].style.outlineStyle = "solid";
      } else {
        checkboxes[i].style.outlineColor = "none";
        checkboxes[i].style.outlineStyle = "none";
      }
    };
}

.checkboxall {
background:#222;
padding:10px;
color:#fff;}

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

Another way is to use Immediately-invoked function expression.

For closures, please have a look here.

var checkboxes=document.getElementsByClassName("highlight");
for(var i=0;i<checkboxes.length;i++){
   (function(index){
    checkboxes[index].onclick=function(){
      if (checkboxes[index].checked) {
        checkboxes[index].style.outlineColor = "red";
        checkboxes[index].style.outlineStyle = "solid";
      } else {
        checkboxes[index].style.outlineColor = "none";
        checkboxes[index].style.outlineStyle = "none";
      }
    };
   }(i));
}

.checkboxall {
background:#222;
padding:10px;
color:#fff;}

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

score 1 · Answer 3 · answered Feb 01 '17 at 11:50

I have done the following method inside my Code and it help me.

On Selecting a checkbox, I have predefined a class selector name responded and when the checkbox is checked, its get dynamically added to the checkbox and I have added a change listener as it listen to our DOM Change and manipulate it.

As a result a beautiful border is displayed around checkbox.

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox); 
  li.appendChild(label);
  ul.appendChild(li);
});
  
ul.addEventListener('change', (e) => {
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;
  
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

/* responded */
.responded {
  transition: 0.4s;
  border-color: rgba(88, 183, 205, .9);
}
.responded label {
  transition: 0.4s;
  color: rgba(88, 183, 205, 1);
}

<body>
  <div class="wrapper">
    <header>
      <h1>RSVP</h1> 
      <p>A Demo App</p>
      <form id="registrar">
        <input type="text" name="name" placeholder="Invite Someone">
        <button type="submit" name="submit" value="submit">Submit</button>
      </form>
    </header>
  
    <div class="main"> 
      <h2>Invitees</h2>
      <ul id="invitedList"></ul> 
    </div>
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>

score 0 · Answer 4 · answered Feb 01 '17 at 11:03

Note: document.getElementsByClassName refers group of elements

Other than document.getElementsByClassName("highlight") you can use document.getElementById("highlightall")

change your Javascript File as below

function preparePage() {

document.getElementById("highlightall").onclick = function() {

if (document.getElementById("highlightall").checked) {

  // use CSS style to show it
  document.getElementsByClassName("checkbox")[0].style.border = "thick solid #FFFFFF";
} else {
  // hide the div
  document.getElementsByClassName("checkbox")[0].style.border = "none";
}
}
// now hide it on the initial page load.
document.getElementsByClassName("checkbox")[0].style.border = "none";
}

window.onload = function() {
 preparePage();
};

I think this may help you

Thanks

How to bind click event handler for multiple checkboxes?

4 Answers4