Question

嗨大家:)我有这个代码，当单击复选框时，将“selected”类添加到我的＆lt; tr>在表中。但是，如果我点击我的＆lt; tr> ？

<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/1.png" alt=""></td>
    <td>tryb</td>
    <td>png</td>
</tr>
<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/2.png" alt=""></td>
    <td>test</td>
    <td>png</td>
</tr>

<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();
</script>

Answer 1

当tr点击

时，您可以触发复选框点击事件

$(':checkbox').change(function (event) {
    $(this).parents('tr').toggleClass('selected', this.checked).addClass("checkbox");
});

// when click on tr it trigger checkbox click event
$('tr').click(function(event) {
  if(!$(this).is('.checkbox')) {
   $(this).find('input[type="checkbox"]').click(); 
  }
  $(this).removeClass('checkbox');
});

更新使用棘手的方法来阻止复选框中的双重效果

Answer 2

再添加一个事件监听器

$('tr').on('click',function(){
   $(this).toggleClass('selected');
});

在e.stopPropagation()更改处理程序中添加checkbox -

$(':checkbox').change(function (e) {
        e.stopPropagation();
        $(this).parents('tr').toggleClass('selected', this.checked);
}).change();

Answer 3

$('tr').click(function(){
    $(this).find('input[type=checkbox]').prop('checked', true);
});

Answer 4

还为tr添加点击事件：

<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();

    $("tr").click(function(){
        if($(this).find(":checkbox").is(":checked"))
           $(this).find(":checkbox").attr("checked",false); 
        else
           $(this).find(":checkbox").attr("checked",true);

        $(":checkbox").change();
    });
</script>

如何在单击标记复选框时进行此操作

4 个答案: