选中下一个同级TD复选框时如何将表格单元格设置为值

Question

这是我的代码:

 ...
    <td class="paymentStatus">@Model.paymentStatus</td>
    <td><input type="checkbox" class="checkbox"/></td>
 </tr>

我想做的是，当复选框被选中时，将paymentStatus td文本设置为"Payment checked"

我试过了:

$(".checkbox").change(function () {
    if ($(this).is(":checked")) {
        $(this).closest('.paymentStatus').text("Payment Checked");
    }
});

是行不通的。有人知道为什么和如何解决吗?

Answer 1

您需要使用closest来获取其父td，然后使用sibling(td.paymentStatus)来设置文本。

演示

$(".checkbox").change(function () {
    if ($(this).is(":checked")) {
          $(this).closest('td')
          .siblings('td.paymentStatus')
          .text("Payment Checked");
    }
});

Answer 2

你必须向上移动一层，然后选择前一个兄弟:

$(this)
    .parent()
    .prev('.paymentStatus')
    .text('Payment checked');