Question

我有一个简单的jQuery问题：

我有以下类型的表：

<table id="my_table">
  <tr>
   <td><input type="checkbox" value="24"></td>
   <td> Click Here To Check The Box </td>
   <td> Or Click Here </td>
  </tr>
 </table>

在jQuery中，我试图选择该行中单击的相应复选框。

 $("#my_table tr").click(function(e) { 
     $(this).closest(":checkbox").attr("checked", checked");
  });

但上述情况并不奏效。有关选择单击行的复选框的快速建议吗？谢谢！

Answer 1

编辑：最佳解决方案

假设只有一个复选框，我会将事件附加到td而不是tr：

$('#my_table td').click(function(e){
  $(this).parent().find('input:checkbox:first').attr('checked', 'checked');
});

Example

如果您希望也能取消选中该复选框...

$('#my_table td').click(function(e) {
    var $tc = $(this).parent().find('input:checkbox:first'),
        tv = $tc.attr('checked');

    $tc.attr('checked', !tv);
});

此功能也需要应用于复选框以取消默认行为。

Example 2

编辑：解决方案是最合理的方法是在目标是输入时取消功能：http://jsfiddle.net/EXVYU/5/

var cbcfn = function(e) {
    if (e.target.tagName.toUpperCase() != "INPUT") {
        var $tc = $(this).parent().find('input:checkbox:first'),
            tv = $tc.attr('checked');
        $tc.attr('checked', !tv);
    }
};

$('#my_table td').live('click', cbcfn);

Answer 2

jQuery closest()方法找到最接近的父级。

您真的想搜索儿童元素，您可以尝试以下方法：

 $("#my_table tr").click(function(e) { 
     $(":checkbox:eq(0)", this).attr("checked", "checked"); 
  });

基本上您正在搜索表格行中找到的第一个复选框

一些参考

jQuery :eq() selector

...

Answer 3

$("#my_table tr").click(function(e) {
    state= $(this).find(":checkbox:eq(0)").attr("checked");
    if (state==true){ // WITH TOGGLE
        $(this).find(":checkbox:eq(0)").removeAttr("checked");
    }else {
        $(this).find(":checkbox:eq(0)").attr("checked", "checked");
    }       
});

我制作简单的脚本来检查特定tr中的第一个复选框。关于切换我只是在发布这个答案之前尝试一下。

Answer 4

试试这个......

 $("#my_table tr").click(function(e) { 
 $(this).closest("type:checkbox").attr("checked", checked");
});

jQuery查找子复选框

4 个答案: