Question

我有这个小提琴：http://jsfiddle.net/qc4uje71/16/

使用复选框创建列表。我想在按钮点击时获取已检查项目的名称。

我有

的已检查项目索引

alert(i).

如何获取已检查项目的名称（即：item0，item1 ..）？

Answer 1

您可以将nextSibling与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>

你也可以改变你的功能：

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

<强>参考

Node.nextSibling

Node.nodeValue

Answer 2

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

您可以使用浏览器支持比textContent更广泛的innerText。

Answer 3

您可以使用document.querySelectorAll('input[type=checkbox]:checked')获取已检查的项目，然后根据需要执行任何操作。

  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>

Answer 4

您没有指定浏览器，因此这是一个使用非常有用的querySelectorAll功能的版本：

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

这将为您提供一系列已选中的复选框。添加此行：

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

会提醒每个项目的价值。

Answer 5

如果名称是简单名称，则可以为input元素指定该名称。您生成<input type="checkbox" name="item0" id="in0">并使用document.getElementById(...).name获取它。另一方面，如果name真的是一个文本而且可以是任何内容，那么你真的需要在input之后使用document.getElementById(...).nextSibling.wholeText（或类似函数）获取文本。

获取列表中的选中项目

5 个答案: