Ссылочный элемент Javascript создан из appendchild?

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

Насколько я понимаю, мое решение должно быть таким же простым, как и оповещение (document.form.checkbox.checked), но независимо от того, какую комбинацию возможных имен я пытаюсь использовать, я получаю сообщение об ошибке, что оно равно null или не является объектом в ie8 и Fire Fox. Спасибо за вашу помощь

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 ,

[...]

Насколько я понимаю, мое решение должно быть таким же простым, как оповещение (document.form.checkbox.checked), но независимо от того, какую комбинацию возможных имен я пытаюсь получить, я получаюошибка в том, что это нулевой или нет объект как в 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;
         });

    });
});

Конечно, для полной поддержки браузера вам нужно немного изменить этот код.