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

发布于 2024-10-07 19:51:14 字数 448 浏览 3 评论 0原文

给定以下 HTML 结构：

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

使用 JQuery，如何在选中复选框时将标签标记内的 img 类切换为“选中”？

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

编辑： 我已经在 $(document).ready(function(){}); 中尝试了以下建议，但无论出于何种原因，这对我不起作用。实际上，我一开始就在做与下面非常接近的事情。任何更多的帮助将不胜感激。

原文

Given the following HTML structure:

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

And using JQuery, how do I toggle the class of the img inside the label tag to be "selected" when the checkbox is selected?

It doesn't matter if it retains the other class (addon-thumb) or not, as long as if the box is deselected it would get that class back.

EDIT:
I have tried both of the below suggestions inside $(document).ready(function(){}); and for whatever reason this is not working for me. I was actually doing something very close to the below in the first place. Any more help would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左秋 2024-10-14 19:51:14

你可以简单地这样做：

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

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

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

You can simply do this:

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

If the position of the label can change, then you can find the correct associated label based on name:

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

回复收藏 0 原文

您的好友蓝忘机已上羡 2024-10-14 19:51:14

$("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) 获取与选择器匹配的下一个同级iff。显然，只有当 HTML 的结构始终是这样时，上面的代码才有效。

参考：更改、更改 jquery.com/next/" rel="nofollow">下一个， 孩子，addClass， removeClass

$("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) gets the next sibling iff it matches the selector. Obviously the above code only works if the structure of your HTML is always like that.

Reference: change, next, children, addClass, removeClass

回复收藏 0 原文

~没有更多了~