Checking if dynamically created checkbox is selected using javascript

Question

I have a table containing checkboxes. I add checkboxes to a table whenever a button is clicked as follows:

    var cell3 = row.insertCell(2);
    cell3.innerHTML = '<input type="checkBox" value=\"selected?\" style="cursor:pointer" value="htcb"/>';

How can I find out if the checkbox in, say cell 3, is selected?

I've tried this

var myCheckBox = row.cells[2].innerHTML;
   if(myCheckBox .checked == true)
      //

but it doesn't work

Why should higherTierCB point to your checkbox? Is there code missing? — Marc
– Marc, Commented Oct 22, 2012 at 9:22
No worries. And to be browser compatible it would be wise to use a library like jQuery for creating and checking dom elements. — Marc
– Marc, Commented Oct 22, 2012 at 9:25

Alnitak · Accepted Answer · 2012-10-22 09:24:30Z

1

The innerHTML property is just a string, you need to access the DOM object itself.

Seeing as the <input> is the only thing in the cell, this should work:

var myCheckBox = row.cells[2].firstChild;
if (myCheckBox.checked) {
    ...
}

answered Oct 22, 2012 at 9:24

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vladimir Gordienko · Accepted Answer · 2012-10-22 09:27:40Z

0

js function:

function check() {
     if($(this).is(”:checked”))
     {
         alert(’checked’);
     }
}

you must add onchange listener:

cell3.innerHTML = '<input type="checkBox" value=\"selected?\" 
               style="cursor:pointer"value="htcb" onchange="check()"/>';

answered Oct 22, 2012 at 9:27

3,5203 gold badges21 silver badges25 bronze badges

There is no mentioning of jQuery