复选框选择addclass给孩子

时间:2015-04-15 15:21:05

标签: javascript jquery twitter-bootstrap checkbox addclass

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

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>

2 个答案:

答案 0 :(得分:3)

使用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

因为thischecked属性无法缩小:)

答案 1 :(得分:0)

你不需要像有人提到的那样找到最接近的tr。你必须使用jquery为每个循环做。当你这样做时,你被定位在输入标签上(你的&#34;这个&#34;让我说它就像你循环时引用输入字段那样)。因此,您需要首先输出您的输入标记,因为您不能使用next(),因为在该层次结构位置的输入标记之后除了父标记之外没有其他标记。这就是为什么你需要使用第一个parent()(为了到达你所在的地方),所以你可以定位在td父标签中。然后使用next()转到下一个td标记,然后使用find(&#34; a&#34;)找到你的标记并添加到类&#34; ok&#34;。

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

您要求解决此问题:

  

我试图添加一个新课程&#34; ok&#34;当它被检查时。

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

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