Question

I am having another problem with my table and checkboxes. I ahve gotten my javascript working which allows my checkbox to check when I click anywhere within the table cell. However, now the checkbox itself doesn’t work. I have tried to solve this for over an hour now, can’t find an answer anywhere. Here is my javascript and a snippet of the html it is manipulating:

function tdOnclick(td) {
    for(var i = 0; i < td.childNodes.length; i++) {
        if(td.childNodes[i].nodeName == "INPUT") {
            if(td.childNodes[i].checked) {
                td.childNodes[i].checked = false;
                td.style.backgroundColor = "#FAF4E3";
            } else {
                td.childNodes[i].checked = true;
                td.style.backgroundColor = "#E1E1E1";
            }
        }
    }
}

Here is a piece of the html for the table:

 <tr>
    <td><center>9:00 - 10:00</center></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="mon09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="tue09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="wed09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="thu09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="fri09"></td>
 </tr>

Answer 1

Actually, I’m going to hazard the guess that it is working. Your click is checking the box, then the onClick event is unchecking it. Here’s an idea:

<input type="checkbox" name="free" value="mon09" onClick="this.checked=!this.checked;">

It’s a bit dirty, but it sucessfully ignores the click.

Working TinkerBin.