jQuery td onclick 设置一个复选框，没有冒泡答案

【问题标题】：jQuery td onclick to set a checkbox, no bubblingjQuery td onclick 设置一个复选框，没有冒泡
【发布时间】：2021-07-31 12:58:15
【问题描述】：

我希望能够单击表中的 td 元素并让它选中或取消选中同一行上同级 td 中的复选框。

单击复选框仍应正常工作。
单击 td 复选框所在的元素还应该选中复选框。
不应单击不同的 td 需要双击（重置单击）由于切换实施不当

小提琴： http://jsfiddle.net/cJ2us/

请注意，是的，这与许多问题非常相似，除非您真正理解我遇到的问题以及那里给出的答案不符合我的问题，否则请不要链接任何重复项。例如

Jquery event on wrapped input radio override 'checked' event 不是复选框

jQuery onclick div checks a checkbox toggle 不允许点击单独的 td 来执行每个检查和取消检查

Find the Checkbox in Sibling <td> and check it using jQuery 不适合这个例子，代码实际上并没有按照回答者的想法工作

这么说，如果您找到合适的骗子，请告诉我！我只想要一个可行的解决方案。

【问题讨论】：

jsfiddle.net/U3636 是我的解决方案

标签： jquery

【解决方案1】：

这行得通，是你想要的吗？

$("td").click(function(e) {
    var chk = $(this).closest("tr").find("input:checkbox").get(0);
    if(e.target != chk)
    {
        chk.checked = !chk.checked;
    }
});

demo here

【讨论】：

好的，现在应该可以工作了，e.srcElement 应该改为 e.target。

【解决方案2】：

使用标签。

<label for='cheboxID'>LABEL</label>

这里是一个js解决方案：http://jsfiddle.net/maniator/eWh5F/

$("td").click(function(e) {
    var checkbox = $(':checkbox', $(this).parent()).get(0);
    var checked = checkbox.checked;
    if (checked == false) checkbox.checked = true;
    else checkbox.checked = false;
});

【讨论】：

试过这个，不能很好地留出填充空间。也许可以阻止它们并使它们填满整个 td 但我宁愿使用 jquery 解决方案抱歉。
@NotHelpful -- 我发布了一个 jQuery 解决方案
FF 复选框的问题 - 每个人似乎都卡在那里：}

【解决方案3】：

$("td").click(function(e) {

    var $checkbox = $("input[type='checkbox']");
       $checkbox.attr('checked', !$checkbox.attr('checked'));



});

http://jsfiddle.net/cJ2us/12/

【讨论】：

点击复选框不勾选！

【解决方案4】：

还有另一种方式，完整的 javascript

 function aply(t){
   let chk = t.firstChild;
    chk.checked =!chk.checked;
 }
 function stopProp(e){
  e.stopPropagation();
 }

.table tr td{
height:50px;
width:100px;
background-color:gray;
}

<table class="table">
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />1</td>
</tr>
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />2</td>
</tr>
</table>

【讨论】：