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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With