Question

我有一个表，我试图使用jquery来定位复选框。我想单击一个单独的td中的复选框，然后更改该td的背景颜色，但我似乎无法定位复选框。这是我的表格中的tr（它有更多的td我刚刚包含了两个这个错误。

<tr class="sources">
  <td><a href="#">Single Life Annuity</a></td>
  <td>
    <div class="left"><input type="checkbox"></div>
    <div class="right">
      <span class="relval">100%</span>
      <span class="benyou">$517.00</span>
      <span class="benben">$0</span>
    </div>
  </td>
  <td>
    <div class="left"><input type="checkbox"></div>
    <div class="right">
      <span class="relval">98%</span>
      <span class="benyou">$2,916.00</span>
      <span class="benben">$0</span>
    </div>
  </td>
</tr>

这是我用来查找复选框的jquery。我正在使用console.log来确保我找到了复选框，但实质上会使用addClass(".active");

 $(".sources td").click(function(e)
 {
   $(this).parent().find('input:checkbox').attr('checked', 'checked');
   console.log('you got it!');
 });

任何帮助都会很棒!!提前谢谢。

Answer 1

使用您的示例（绑定到表格单元格上的点击），这将选择单元格并应用红色背景：

$(this).css('background','red');

<强> jsFiddle example

如果您更愿意绑定复选框的click事件，请尝试以下操作：

$(".sources td input").click(function (e) {
    $(this).parent().find('input:checkbox').attr('checked', 'checked');
     $(this).closest('td').css('background','red');
    console.log('you got it!');
});

<强> jsFiddle example

Answer 2

$('input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
        $(this).parent().parent().addClass('active');
    } else {
        $(this).parent().parent().removeClass('active');
    }
});

Answer 3

您也可以尝试使用.prop（）方法。

 $(this).parent().find('input:checkbox').prop("checked", true);

http://api.jquery.com/prop/

Answer 4

根据需要：DEMO

$('input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
        $(this).parent().parent().css('background','red');
    } else {
       $(this).parent().parent().css('background','white');
    }
});

其他方式，点击<td>：DEMO

中的任意位置即可

$(".sources td").click(function (e) {
    if ($(this).find('input:checkbox').is(':checked')) { 
        $(this).find('input:checkbox').attr('checked', false);
        $(this).closest('td').css('background','white');
    }
    else
    {
        $(this).find('input:checkbox').prop('checked', 'checked');
        $(this).closest('td').css('background','red');
    }
});

定位表格中的复选框

4 个答案: