Get selected checkbox(dynamically created) value in javascript

Question

I'm using the following code snippet for create a dynamic checkbox .

This code snippet is inside of the for loop .based on the for loop the check boxes will create.The main function is called in the html onload.

This functionality is working fine.But if I choose the check box I need to get the value of the check box .I use the addEventListener its not working fine.

var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = "name";
  checkbox.value = teamIds;
  checkbox.id = i;
  checkbox.addEventListener("click",setTeamIdsinTextBox(teamNamesToShow),false);
  body.appendChild(checkbox);

Now I need, if I select the two checkboxes and I want to pass the both values to the setTeamIdsinTextBox function with comma separate string.

How can I do this? I need to achieve this with the javascript alone.

so I need to frame the selected checkbox values like

var teamNamesToShow ="firstselectedcheckboxvalue,secondselectedcheckboxvalue"

Thanks in Advance.

Answer 1

The click listener needs to iterate over the checkboxes and collect the ids of those that are checked. You can use a selector to get just the checked ones, or filter the checked ones later which allows for a less complex selector.

The following uses the more complex selector but simpler map callback:

 window.onload = function(){ var form = document.forms['form0']; for (var i=0; i<10; i++) { var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.name = 'name' + i; checkbox.value = 'value' + i; checkbox.id = 'cb' + i; checkbox.addEventListener("click", setTeamIdsinTextBox, false); form.appendChild(checkbox); // add checkboxes to form, not body } } function setTeamIdsinTextBox() { var form = this.form; var cbs = Array.from(form.querySelectorAll('input[type="checkbox"]:checked')); var ids = cbs.map(function(cb) {return cb.id}); form.ta0.value = ids.join(', '); }

 <form id="form0"> <textarea id="ta0" name="ta0"></textarea> </form>

The body of the function could be:

this.form.ta0.value =  Array.from(this.form.querySelectorAll('input[type="checkbox"]:checked')).map(function(cb) {return cb.id}).join(', ');

but I think splitting it over a couple of lines is more sensible.

Edit

Array.from was introduced in ECMAScript 2015 so may not be available in all implementations in use. There's a polyfill at MDN that can be included to provide support where lacking. Also, it can be replaced with Array.prototype.slice , which has ubiquitous support.

Instead of:

Array.from(form.querySelectorAll('input[type="checkbox"]:checked'));

use:

[].slice.call(form.querySelectorAll('input[type="checkbox"]:checked'));

however that may fail in IE 8 as (from memory) it doesn't allow calling built–in methods with a host object as this . In that case, go directly to map and provide a polyfill for IE 8 :

[].map.call(form.querySelectorAll('input[type="checkbox"]:checked'), function(cb) {return cb.id});

That will work in IE 8 as the polyfill for map means that it's a native function, not built–in so using a NodeList as this is OK. Versions of IE with map are OK with the host object thing.

Answer 2

In the for loop which you are iterating maintain an int variable which gives you the exact no. of checkboxes which you are going to create.And then using that again iterate through a for loop for that int variable and check for each checkbox whether it is checked or not.

int countCheckBox=0;
var listOfCheckBoxVal='';

function setTeamIdsinTextBox(){

    for(int i =1; i<=countCheckBox;i++){

    if(document.getElementById(i).checked==true){

          listOfCheckBoxVal += document.getElementById(i).value+",";

    }

}

Now this listOfCheckBoxVal variable will have the list of values of checked checkboxes seperated by a comma.