Question

我使用以下代码段创建动态复选框。

此代码段位于for loop内部。基于for loop 复选框将创建。主要功能在html onload。

此功能运行正常。但如果我选择复选框，我需要获取复选框的值。我使用addEventListener不能正常工作。

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);

现在我需要，如果我选择两个复选框，我想将这两个值传递给 setTeamIdsinTextBox function ，并使用逗号分隔字符串。

我该怎么做？我需要单独使用 javascript 来实现这一目标。

因此我需要对所选的复选框值进行框架，例如

var teamNamesToShow =＆＃34; firstselectedcheckboxvalue，secondselectedcheckboxvalue＆＃34;

先谢谢。

Answer 1

点击侦听器需要遍历复选框并收集已检查的ID。您可以使用选择器来获取已选中的选择器，或者稍后过滤选中的选择器，这样可以选择不太复杂的选择器。

以下使用更复杂的选择器，但使用更简单的 map 回调：

＆＃13;

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(', ');
}

＆＃13;

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

＆＃13;

该功能的主体可以是：

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

但我认为将它分成几行是更明智的。

修改

Array.from 是在ECMAScript 2015中引入的，因此可能无法在所有正在使用的实现中使用。可以包含polyfill at MDN以提供缺乏支持。此外，它可以替换为 Array.prototype.slice ，它无处不在。

而不是：

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

使用：

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

然而，在IE 8中可能会失败（因为从内存中）它不允许使用主机对象调用内置方法 this 。在这种情况下，请直接转到地图并提供polyfill for IE 8：

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

这将在IE 8中工作，因为 map 的polyfill意味着它是一个原生函数，不是内置的，因此使用NodeList作为这个是可以的。使用 map 的IE版本可以与主机对象一起使用。

Answer 2

在你正在迭代的for循环中，维护一个int变量，它给出了确切的no。你将要创建的复选框。然后再使用它迭代该int变量的for循环并检查每个复选框是否被选中。

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+",";

    }

}

现在这个listOfCheckBoxVal变量将包含以逗号分隔的已选中复选框的值列表。

在javascript中获取选中的复选框（动态创建）值

2 个答案:

修改