0

入力ボックスがチェックされている場合、クラスを li 要素に適用しようとしていますが、それが起こっていない理由がわかりません。HTML と CSS は「他の人による」ものなので、jQuery だけではエラーがあると確信しています。

HTMLは

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>

このためのJqueryは

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $('.subproduct li').addClass("checked");
         } else {
             $('.subproduct li').removeClass("checked");
         }
    });
});

すべての CSS と HTML を使用して小さな JSFiddle を作成しました - http://jsfiddle.net/sturobson/gG8Qr/

確かに、特定性が高すぎるか何かがありますか？基本的に、チェックボックスがチェックされている場合、クラスを .subproduct li に追加/削除したい

しかし、現在のコードは機能していません。何か案は？

4

3 に答える 3

1

チェックボックスがチェックされているかどうかをチェックしています...チェックされている場合は、すべてにクラスを追加してい<li>ます..parent()その特定のものを取得するために使用し<li>、クラスの追加または削除を使用します。

$(document).ready(function() {
  $('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).parent().addClass("checked");
    } else {
         $(this).parent().removeClass("checked");
    }
  });
});

ここでフィドル

于 2013-03-11T10:20:27.517 に答える
1

クラスを常にすべてのli要素に割り当てています。li次のように、 jQuery parent()を使用して、直接の親子関係にのみ割り当ててみてください。

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent("li").addClass("checked");
        } else {
            $(this).parent("li").removeClass("checked");
        }
    });
});

または、クラスが親であるかどうかに関係なく、常に親にクラスを割り当てたい場合は、以下のようにli使用できます。parent()

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent().addClass("checked");
        } else {
            $(this).parent().removeClass("checked");
        }
    });
});

デモ- 親にのみクラスを割り当てるli

于 2013-03-11T10:20:49.677 に答える
1

.subproduct liすべての要素を選択するのではなく、DOM を下る必要があります。これには、jQuery の親、次、または前の関数を使用します。あなたの例では：

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $(this).parent().addClass("checked");
         } else {
             $(this).parent().removeClass("checked");
         }
    });
});
于 2013-03-11T10:21:01.350 に答える