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和ie中的对象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;
         });

    });
});

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

从appendchild创建的Javascript引用元素？

2 个答案: