从appendchild创建的Javascript参考元素？

Question

我正在使用appendchild方法创建表。 它们包含复选框。 我希望能够让用户单击一个复选框并运行一个功能。 我需要该功能来访问另一个复选框，并查看其是否被选中。 目前，我似乎根本无法引用该表或复选框。 我创建表的代码是：

function makeTable() {
    var ItemA = Item.ItemName.options[Item.ItemName.options.selectedIndex].text;
    var myParagraph=document.getElementById("myLine");
    myForm = document.createElement("FORM");
    mytable = document.createElement("TABLE");
    mytablebody = document.createElement("TBODY");

            var CB_Format = document.createElement('input');
            CB_Format.type = 'checkbox';
            CB_Format.name= "CB_Test";
            CB_Format.value= 1;
            CB_Format.setAttribute("name", "CBTest2");
            CB_Format.onclick = changeColor;
            theCell.appendChild(CB_Format);

            var CB_Delete = document.createElement('input');
            CB_Delete.type = "checkbox";
            CB_Delete.name = "CB_Test";
            CB_Delete.setAttribute("name", "CBTest2");
            CB_Delete.value = 2; 
            CB_Delete.onclick = answer; 
            theCell.appendChild(CB_Delete);

我的理解是，我的解决方案应该像alert（document.form.checkbox.checked）一样简单，但是无论我尝试使用哪种可能的名称组合，我都会得到一个错误，即它是null或在ie8和firefox中都不是对象。 谢谢您的帮助

Answer 1

> function makeTable() {
>      var ItemA = Item.ItemName.options[Item.ItemName.options.selectedIndex].text;
>      var myParagraph=document.getElementById("myLine");
>      myForm = document.createElement("FORM");
>      mytable = document.createElement("TABLE");
>      mytablebody = document.createElement("TBODY");

如果不使用var声明变量，则在首次求值时它们将成为全局变量。 始终声明变量。

>          var CB_Format = document.createElement('input');
>          CB_Format.type = 'checkbox';
>          CB_Format.name= "CB_Test";
>          CB_Format.value= 1;
>          CB_Format.setAttribute("name", "CBTest2");

上一行从前面几行分配的值更改了name属性，为什么两者都做？ 只需将正确的值分配给name属性一次：

CB_Format.name = "CBTest2";

以后使用setAttribute时也是如此 。 请注意，在某些浏览器中，设置属性的值并不总是会更改关联的属性，因此，除非有特殊原因要使用setAttribute ，否则请始终使用属性。

[...]

我的理解是，我的解决方案应该像alert（document.form.checkbox.checked）一样简单，但是无论我尝试使用哪种可能的名称组合，我都会得到一个错误，即它是null或在ie8和firefox中都不是对象。 谢谢您的帮助

表单控件可用作表单元素的命名属性。 如果有多个同名控件，则它们在一个集合中。 为name属性和属性分配不同的值很麻烦。 应该是第二个赋值会覆盖第一个赋值，但是毫无疑问，某个地方有一个浏览器将保留两个值（一个用于属性，另一个用于属性）。

一种简单的解决方案是始终使用属性，并且仅分配一个值。 如果您希望名称为CBTest2 （因为这是分配的第二个名称），那么在将输入添加到表单以及将表单添加到文档中时，该名称将显示为：

document.forms['formName'].elements['CBTest2']

如果名称是有效的标识符，则可以使用速记点表示法：

document.formName.CBTest2

由于您有两个具有该名称的元素，因此返回的值将是一个集合（有点像一个数组），因此要获取第一个元素，请使用：

document.formName.CBTest2[0]

Answer 2

您可以使用类似于...的代码

var checkboxes = document.querySelectorAll('#some-form input[type="checkbox"]');

Array.forEach(checkboxes, function(checkbox) {
    checkbox.addEventListener(function() {

         var hasOtherCheckedCheckbox = Array.every(checkboxes, function(checkbox) {
             return checkbox.checked;
         });

    });
});

当然，为了获得完整的浏览器支持，您需要稍微修改一下此代码。