jquery - 使用 jquery 在输入选择上切换兄弟姐妹的孩子的班级

Question

给定以下 HTML 结构：

<input class="addon-thumb" type="checkbox" name="foo"/><label for="foo"><img class="addon-thumb" src="" title="bar" alt="foo"/></label>

使用jQuery，如何在选中复选框时将IMG的类剪切的IMG的类进行切换？

它是否保留其他类（addon-thumb）并不重要，只要取消选择该框，它就会恢复该类。

编辑： 我在里面尝试了以下两个建议$(document).ready(function(){});，无论出于何种原因，这对我都不起作用。首先，我实际上正在做一些非常接近下面的事情。任何更多的帮助将不胜感激。

Answer 1

$("input[type='checkbox']").change(function() {
    if(this.checked) {
        $(this).next('label').children('img').addClass('selected');
    }
    else {
        $(this).next('label').children('img').removeClass('selected');
    }
});

next(selector)如果它与选择器匹配，则获取下一个兄弟。显然，上面的代码只有在你的 HTML 结构总是这样的情况下才有效。

参考：change, next, children, addClass,removeClass

Answer 2

你可以简单地这样做：

$(":checkbox").change(function () {
   $(this).next("label").children("img").toggleClass("selected", this.checked);
});

如果标签的位置可以改变，那么您可以根据以下内容找到正确的关联标签name：

$("[for=" + this.name + "]").children("img")
   .toggleClass("selected", this.checked);