Get checked items in List

Question

I have this fiddle : http://jsfiddle.net/qc4uje71/16/

A list is created with a checkbox. I want to get the name of checked items on button click.

I have the index of checked items with

alert(i).

How can I get the name of checked item (ie : item0, item1..) ?

Alex Char · Accepted Answer · 2015-05-28T15:36:31.083

You can use nextSibling with nodeValue:

  for (var i = 0; i < 5; i++) {

    var node = document.createElement("li");
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.id = "in" + i;
    node.appendChild(x);
    var textnode = document.createTextNode("item" + i);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
  }

  function displayCheckedGroup() {
    for (var i = 0; i < 5; i++) {
      if (document.getElementById("in" + i).checked == true) {
        //change this
        alert(document.getElementById("in" + i).nextSibling.nodeValue);
      }
    }
  }

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
li {
  clear: left;
  font-size: 25px;
  padding: 3px 0px 3px 10px;
  margin: 0px;
}
li input {
  float: right;
  margin-right: 15px;
  width: 25px;
  height: 25px;
}
li:nth-child(even) {
  background-color: #eee;
}

<ul id="myList">
</ul>

<button onclick="displayCheckedGroup()">Display checked items</button>

Also you can change a bit your function:

  function displayCheckedGroup() {
      var elem, i;
      for (i = 0; i < 5; i++) {
          elem = document.getElementById("in" + i)
          if (elem.checked) {
              alert(elem.nextSibling.nodeValue);
          }
      }
  }

References

Node.nextSibling

Node.nodeValue

If this answer solve your problem then please mark it as correct when you can :) — Alex Char, May 28 '15 at 15:36

Samurai · Answer 2 · 2015-05-28T15:44:18.867

0

document.getElementById("in"+i).parentNode.textContent;

You can use textContent which has a wider browser support than innerText.

edited May 28 '15 at 15:44

answered May 28 '15 at 15:33

Samurai

3,724
5
27
39

`innerText` isn't available in many browsers: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox – Paul Roub May 28 '15 at 15:34

score 0 · Answer 3 · answered May 28 '15 at 15:35

You can use document.querySelectorAll('input[type=checkbox]:checked') to get the checked items, then do whatever you need to do with them.

  for(var i = 0 ; i<5; i++){

 var node = document.createElement("li");
 var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox"); 
    x.id="in"+i;
    node.appendChild(x);
 var textnode = document.createTextNode("item"+i);
 node.appendChild(textnode);
 document.getElementById("myList").appendChild(node);
  }

function displayCheckedGroup(){
    var items = document.querySelectorAll('input[type=checkbox]:checked');
    for(var i = 0; i < items.length; i++ ){
        alert(items[i].id);
    }
}

 <ul id="myList">
 </ul>

 <button onclick="displayCheckedGroup()">Display checked items</button>

Jared Smith · Answer 4 · 2015-05-28T15:40:05.500

0

You don't specify a browser so here's a version that uses the highly useful querySelectorAll function:

var list = [].slice.call(document.querySelectorAll('input[type="checkbox"]'))
               .filter(function(input) {
                   return input.checked;
               });

this will give you an array of checked checkboxes. Adding this line:

list.forEach(function(input) {alert(input.value);});

will alert each item's value.

edited May 28 '15 at 15:40

answered May 28 '15 at 15:36

Jared Smith

19,721
5
45
83

Here's hoping IE8 isn't in the targeted browser list. – Paul Roub May 28 '15 at 15:39
That's why the first line of my answer is what it is. And there is a polyfill that I believe supports all the way back to IE 6. – Jared Smith May 28 '15 at 15:41

score 0 · Answer 5 · answered May 28 '15 at 15:37

If the name is a simple name you can give the input element that name. You produce <input type="checkbox" name="item0" id="in0"> and get it with document.getElementById(...).name. On the other hand, if name is really a text and can be anything then you really need to get the text after the input with document.getElementById(...).nextSibling.wholeText (or similar functions).

Get checked items in List

5 Answers5