Adding an eventListener to each checkbox

Question

I'm looking for a clean and concise way to add event listeners to each of my checkboxes without having to repeat my Javascript code, I'm still wet behind the ears when it comes to JS, so any assistance would be greatly appreciated.

Here's what I have so far

  function exFunction() {}; // on-click var x = document.getElementById("checkboxopt"); x.addEventListener("click", function(){ console.log("Opt"); }); var y = document.getElementById("checkboxopt1"); y.addEventListener("click", function(){ console.log("Opt 1"); }); var z = document.getElementById("checkboxopt2"); z.addEventListener("click", function(){ console.log("Opt 2"); }); 

 <div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div> 

Answer 1

Either select all and loop over the collection and add the events to each element in the collection.

 var cbs = document.querySelectorAll('[type="checkbox"]'); [].forEach.call(cbs, function (cb) { cb.addEventListener("click", function(){ console.log(this.id); }); }); 

 <div id="wrap"> <div id=""> <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"> </div> <div id=""> <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"> </div> <div id=""> <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"> </div> </div> 

or event delegation and use the event object to figure out what element was clicked.

 var wrapper = document.getElementById('wrap'); wrapper.addEventListener("click", function (evt) { var elem = evt.target; if (elem.name==="checkboxopt") { console.log(elem.id); } }); 

 <div id="wrap"> <div id=""> <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"> </div> <div id=""> <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"> </div> <div id=""> <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"> </div> </div> 

Answer 2

Well you can iterate in each checkbox:

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for(var i = 0; i < checkboxes.length; i++){
     var checkbox = checkboxes[i];
     checkbox.addEventListener('click', function(){
         console.log(this);
     });
}

Hope that helps.

Cheers

Answer 3

You can use for loop and create function outside of loop.

 var c = document.querySelectorAll('input[type="checkbox"]'); for (let i = 0; i < c.length; i++) { clickFunction(i) } function clickFunction(num) { c[num].addEventListener('click', function() { console.log('Opt ' + (num + 1)); }) } 

 <div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div> 

Or with ES6 you can use let instead of var which have block scope so in each iteration of loop new i will be created.

 var c = document.querySelectorAll('input[type="checkbox"]'); for (let i = 0; i < c.length; i++) { c[i].addEventListener('click', function() { console.log('Opt ' + (i + 1)); }) } 

 <div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div> <div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>