单击时我的复选框将不选中

My checkbox will not check when clicked

本文关键字：复选框 我的 单击      更新时间：2023-09-26

我的表和复选框出现了另一个问题。我已经让我的javascript工作了，它允许我的复选框在我点击表格单元格内的任何地方时进行检查。但是，现在复选框本身不起作用。我已经试着解决这个问题一个多小时了，但在任何地方都找不到答案。这是我的javascript和它正在操作的html片段：

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

下面是表格的一段html：

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

实际上，我要冒险猜测它正在工作。你的点击选中了复选框，然后onClick事件取消选中它

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

它有点脏，但它成功地忽略了点击。

正在工作的TinkerBin。

如果我是一个赌徒，我猜你正在进行双击事件。一个用于输入，一个用于父级。从本质上讲，你得到了两次点击，有效地禁用了你的输入。阅读这篇文章。这样的概率会起作用。

<input type="checkbox" name="free" value="fri09" onclick="return false;" />

您的点击按预期选中复选框，然后调用TD点击代码，您可以切换回复选框。

下面是一个jsfiddle，其中有一些评论显示了正在发生的事情。http://jsfiddle.net/NujXv/2/

你需要阻止事件从复选框冒泡到TD。我在搜索jquery函数时发现了这一点http://api.jquery.com/event.stopPropagation.我在jsfiddle中放了一条注释行，这可能有效，但我有真正的jquery经验，所以你可能需要对它进行一些调整。

我遇到了同样的问题：

检查某个地方是否正在调用"preventDefault"，并检查复选框的点击函数是否返回true，以及是否存在preventDefault之前的。

我用这样的方法来解决它：

$("#recordlist").click( function(e) {
     if (e.target.name == 'recordlistitem'){ // When recordlistitem is a checkbox(es)
        return true;
     }
     e.preventDefault();
     // other stuff here
}

使用css：指针事件：none；启用复选框。它将阻止最初的选中和取消选中，但单击仍然可以完成工作。

相关文章：