我正在试图弄清楚如何做到这一点,但我无法在任何地方找到这些信息.基本上,我有一个表格,每个单元格包含一个复选框.我希望能够通过单击单元格中的任意位置来勾选复选框.我无法弄清楚如何做到这一点,Javascript对我来说是最好的解决方案,但我也可以使用jQuery.
这是我的一排表,我希望这样做：
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkBox" name="free" value="mon09"></center></td>
<td><center><input type="checkBox" name="free" value="tue09"></center></td>
<td><center><input type="checkBox" name="free" value="wed09"></center></td>
<td><center><input type="checkBox" name="free" value="thu09"></center></td>
<td><center><input type="checkBox" name="free" value="fri09"></center></td>
</tr>
解决方法
这应该这样做：
<html>
<head>
<script type="text/javascript">
function onload() {
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].onclick =
function(td) {
return function() {
tdOnclick(td);
};
}(tds[i]);
}
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].onclick =
function(input){
return function() {
inputOnclick(input);
};
}(inputs[i]);
}
}
function tdOnclick(td) {
for(var i = 0; i < td.childNodes.length; i++) {
if(td.childNodes[i].nodeType == 1) {
if(td.childNodes[i].nodeName == "INPUT") {
if(td.childNodes[i].checked) {
td.childNodes[i].checked = false;
td.style.backgroundColor = "red";
} else {
td.childNodes[i].checked = true;
td.style.backgroundColor = "green";
}
} else {
tdOnclick(td.childNodes[i]);
}
}
}
}
function inputOnclick(input) {
input.checked = !input.checked;
return false;
}
</script>
</head>
<body onload="onload()">
<table>
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkBox" name="free" value="mon09"></center></td>
<td><center><input type="checkBox" name="free" value="tue09"></center></td>
<td><center><input type="checkBox" name="free" value="wed09"></center></td>
<td><center><input type="checkBox" name="free" value="thu09"></center></td>
<td><center><input type="checkBox" name="free" value="fri09"></center></td>
</tr>
</table>
</body>
</html>
