选中的复选框将类添加到孩子答案

【问题标题】：checkbox selected addclass to a child选中的复选框将类添加到孩子
【发布时间】：2025-11-29 09:00:01
【问题描述】：

我正在尝试在检查时向<a href> 添加一个新类“ok”。我正在使用来自http://wenzhixin.net.cn/p/bootstrap-table 的引导、jquery 和引导表。

jsfiddle：http://jsfiddle.net/x0wegnhs/1/

你能帮我把它放出来吗？

<tr>
    <td class="bs-checkbox"><input data-index="0" name="btSelectItem" type="checkbox"></td>
    <td style="text-align: left; "><a href="#" class="file">file 1</a></td>
</tr>

【问题讨论】：

标签： javascript jquery twitter-bootstrap checkbox addclass

【解决方案1】：

使用closest 查找最近的tr，然后使用find 查找锚链接。使用带有布尔值的toggleClass 根据选中状态打开/关闭ok 类。

http://jsfiddle.net/TrueBlueAussie/x0wegnhs/6/

$(':checkbox').change(function () {
    $(this).closest('tr').find('td a').toggleClass('ok', $(this).is(':checked'));
});

关于 jQuery 与直接访问的附注：

正如@Karl-André Gagnon 指出的那样，显然可以通过像这样为选中的属性使用 RAW JS 来缩短一点：

$(':checkbox').change(function () {
    $(this).closest('tr').find('td a').toggleClass('ok', this.checked));
});

但是，我通常会为 $(this) 元素和我的选择器常量设置一个变量，所以：

$this.is(checkedSelector)

缩小后变为如下：

t.is(c)

实际上比：

this.checked

因为this 和checked 属性不能被缩小:)

【讨论】：

赞成，但它是否可以防止您使用.is("checked") 而不是this.checked 出现任何错误？
@Karl-André Gagnon：添加了您的建议（以及我养成这种习惯的原因 - 更小的压缩代码）。

【解决方案2】：

您不需要像有人提到的那样找到最近的 tr。您必须使用 jquery 为每个循环执行此操作。当你这样做时，你被定位在输入标签（你的“这个”让我说它就像你循环时引用输入字段一样）。因此，您需要首先退出您的输入标签，因为您不能使用 next() 因为在该层次结构位置的输入标签之后除了父标签之外没有其他标签。这就是为什么你需要使用 first parent() （去你所在的地方），所以你可以定位在 td 父标签中。然后你使用 next() 转到下一个 td 标签，然后你使用 find("a") 找到你的 a 标签并添加到它的 class "ok"。

$(document).ready(function(){
    $("input[name=btSelectItem]").each(function () {
        if (this.checked){
            $(this).parent().next().find("a").addClass("ok");
        }
    }); 
});

您要求解决此问题：

我正在尝试在检查时添加一个新类“ok”。

你可以在这里找到它——使用我描述的一段代码，类将被添加到它的复选框旁边的任何标签上。您可以检查源代码并亲自查看已将类 ok 添加到选中的复选框。

http://jsfiddle.net/upquya6p/2/

【讨论】：