1

HTMLは次のとおりです。

<ul>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
</ul>

jQuery：

$this('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.checkbox-wrap').addClass("active-checkbox");
    } else {
        $('div.checkbox-wrap').removeClass("active-checkbox");
    }
});

チェックボックスをオンにすると、クラス「active-checkbox」が3つのdiv全体に追加されます。IDまたはカスタムクラス名を使用せずに、3つのdiv全体ではなく、単一のdivにクラスを追加する方法はありますか？

ありがとう

4

5 に答える 5

2

$this('input:checkbox')の代わりに 間違って配置しました。closest （）$('input:checkbox')を使用して、祖先階層の上位にあるセレクターの最初の出現を見つけることができます。

ライブデモ

$('input:checkbox').change(function(){       
    if($(this).is(":checked")) {
        $(this).closest('div.checkbox-wrap').addClass("active-checkbox");
    } else {
        $(this).closest('div.checkbox-wrap').removeClass("active-checkbox");
    }
});​
于 2012-11-29T10:48:23.937 に答える
1

closest最も近い.checkbox-wrap要素を見つけるために使用する必要があります：

$('input:checkbox').change(function() {
    var $checkbox = $(this);
    if ($checkbox.is(":checked")) {
        $checkbox.closest('div.checkbox-wrap').addClass("active-checkbox");
    } else {
        $checkbox.closest('div.checkbox-wrap').removeClass("active-checkbox");
    }
});

close（）の詳細

また、$this最初はエイリアスバージョンのjQueryであり、タイプミスではないと思いますか？

于 2012-11-29T10:48:15.077 に答える
1

n番目の子セレクターを使用できます

于 2012-11-29T10:49:21.487 に答える
0

:eq()Selectorを使用してこれを行うことができます

$(".checkbox-wrap:eq(0)").addClass("active-checkbox");

これをチェックしてください

于 2012-11-29T10:49:58.587 に答える
0 
$this('input:checkbox').change(function(){
   $(this).parents('div.checkbox-wrap').toggleClass("active-checkbox", $(this).is(":checked"));
});
于 2012-11-29T10:51:56.917 に答える