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のクラスを「選択」に切り替えるにはどうすればよいですか？

ボックスが選択解除されている限り、他のクラス（アドオンサム）を保持するかどうかは関係ありません。そのクラスが元に戻ります。

編集： 私は以下の提案の両方を内部で試しましたが、$(document).ready(function(){});何らかの理由でこれは私にはうまくいきません。そもそも、私は実際に以下に非常に近いことをしていました。これ以上の助けをいただければ幸いです。

4

2 に答える 2

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

于 2010-12-15T02:49:42.153 に答える
1

これを簡単に行うことができます：

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

ラベルの位置が変わる可能性がある場合は、以下に基づいて正しい関連付けられたラベルを見つけることができますname。

$("[for=" + this.name + "]").children("img")
   .toggleClass("selected", this.checked);
于 2010-12-15T03:23:24.930 に答える