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.

All form controls have a form property that references the form they're in, so this.form.querySelectorAll('input[type="checkbox"]') should get the checkboxes. Now iterate over them and collect the values of the checked ones (use Array filter method perhaps). — RobG
– RobG, Commented Feb 6, 2017 at 5:17

RobG · Accepted Answer · 2017-02-06 12:46:51Z

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.

edited Feb 6, 2017 at 12:46

answered Feb 6, 2017 at 5:32

RobG

148k32 gold badges180 silver badges216 bronze badges

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

3 Comments

User Over a year ago

@RoboG I got the following error Object doesn't support property or method 'from'

RobG Over a year ago

@User—that means your host doesn't support Array.from. There's a polyfill on MDN you can use, or replace with [].slice.call(this.form.querySelectorAll(...)).map(...)....

User Over a year ago

@RoboG can you please little bit elaborate on this .?

reema · Accepted Answer · 2017-02-14 13:12:22Z

0

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.

edited Feb 14, 2017 at 13:12

answered Feb 6, 2017 at 5:21

reema

198 bronze badges

Collectives™ on Stack Overflow

Get selected checkbox(dynamically created) value in javascript

2 Answers 2

Edit

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related