Question

我希望能够点击表格中的td元素，并选中或取消选中同一行中兄弟td中的复选框。

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

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

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

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

jQuery onclick div checks a checkbox 切换不允许单击单独的td来执行每个检查并取消选中

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

在说，如果你发现一个适合的骗局让我知道！我只想要一个可行的解决方案。

Answer 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

Answer 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;
});

Answer 3

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

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



});

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

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

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

4 个答案: