checkbox selected addclass to a child

Question

我正在尝试将新的 class "ok" 添加到 <a href> 中，当它被选中时。我正在使用来自 http://wenzhixin.net.cn/p/bootstrap-table.

的 bootstrap、jquery 和 bootstrap table

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>

Answer 1

使用closest找到最近的tr，然后find找到锚点link。将 toggleClass 与布尔值一起使用，以根据选中状态将 on/off 变为 ok class。

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 属性无法缩小:)

Answer 2

您不需要像有人提到的那样找到最近的 tr。您必须为每个循环执行 jquery。当你这样做时，你位于输入标签（你的 "this" 让我这么说吧，当你循环时，它被引用到输入字段）。所以你需要先退出你的输入标签，因为你不能使用 next() 因为在那个层次结构位置的输入标签之后除了父标签之外没有其他标签。这就是为什么你需要先使用 parent() （到你所在的地方），这样你就可以定位在 td parent 标签中。然后你使用 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");
        }
    }); 
});

你问的是这个问题的解决方案：

I'm trying to add a new class "ok" to an when it's checked.

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

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

checkbox selected addclass to a child

checkbox selected addclass to a child

javascript

checkbox

jquery

addclass

twitter-bootstrap