Javascript reference element created from appendchild?

Question

I am creating tables with the appendchild method. They contain checkboxes. I would like to be able to have the user to click a checkbox and have it run a function. I need the function to access the other checkbox and see if its checked or not. Currently I can' seem to reference the table or checkboxes at all. My code for creating the table is:

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

My understanding is that my solution should be as simple as alert(document.form.checkbox.checked) but no matter what combination of possible names I try I get the error that it is null or not an object in both ie8 and firefox. Thank you for your help

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

If you don't declare variables with var , they become global variables when first evaluated. Always declare variables.

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

The above line changes the name property from the value assigned a couple of lines earlier, why do both? Just assign the correct value to the name property once:

CB_Format.name = "CBTest2";

The same goes for the use of setAttribute later. Note that setting the value of a property doesn't always change the associated attribute in some browsers, so always use properties unless there is a specific reason to use setAttribute ,

[...]

My understanding is that my solution should be as simple as alert(document.form.checkbox.checked) but no matter what combination of possible names I try I get the error that it is null or not an object in both ie8 and firefox. Thank you for your help

Form controls are made available as named properties of the form element. If there is more than one control with the same name, they are in a collecion. Assigning different values to the name property and attribute is asking for trouble. It should be that the second assignment overwrites the first, but no doubt there is a browser somewhere that will keep both values (one for the attribute and the other for the property).

The simple solution is to always use properties and only assign one value. If you want the name to be CBTest2 (since that is the second one assigned), then when the input is added to the form and the form to the document it will be available as:

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

If the names are valid identifiers, then shorthand dot notation can be used:

document.formName.CBTest2

Since you have two elements with that name, the returned value will be a collection (a little like an array), so to get the first one, use:

document.formName.CBTest2[0]

Answer 2

You could use some code similar to...

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

    });
});

Of course, for complete browser support, you'll need to modify this code a bit.