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

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两个值传递给setTeamIdsinTextBox function 。

我怎样才能做到这一点？ 我需要单独使用javascript来实现这一点。

所以我需要将选定的复选框值框起来，例如

var teamNamesToShow ="firstselectedcheckboxvalue,secondselectedcheckboxvalue"

提前致谢。

Answer 1

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

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

 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>

函数体可以是：

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

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

编辑

Array.from是在 ECMAScript 2015 中引入的，因此可能并非在所有使用的实现中都可用。 MDN上有一个polyfill ，可以包含它以在缺乏的地方提供支持。 此外，它可以替换为Array.prototype.slice ，它具有无处不在的支持。

代替：

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

用：

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

但是，这可能会在 IE 8 中失败，因为（从内存中）它不允许使用主机对象调用内置方法作为this 。 在这种情况下，直接去映射并为 IE 8提供一个polyfill ：

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

这将在IE 8的工作作为填充工具在地图的手段，这是一个原生的功能，没有内置因此使用节点列表，因为这是确定。 带有地图的 IE 版本可以处理主机对象。

Answer 2

在您迭代的 for 循环中维护一个 int 变量，它为您提供确切的编号。 您将要创建的复选框。然后再次使用它遍历该 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 变量将包含以逗号分隔的选中复选框的值列表。