3

こんにちは私は次のことをしたいと思います。

次のようなチェックボックスのあるリストがあります。

<ul>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="12" value="12" alt="Opbrengsten" checked="checked">Opbrengsten</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="13" value="13" alt="Netto Omzet">Netto Omzet</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="14" value="14" alt="Overige Opbrengsten">Overige Opbrengsten</li>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="15" value="15" alt="Kosten van grond-en Hulpstoffen / Uitbesteed werk">Kosten van grond-en Hulpstoffen / U</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="16" value="16" alt="Inkoopprijs van de verkopen">Inkoopprijs van de verkopen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="17" value="17" alt="Kosten uitbesteed werk">Kosten uitbesteed werk</li>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="18" value="18" alt="Personeelskosten">Personeelskosten</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="19" value="19" alt="Lonen &amp; Salarissen">Lonen &amp; Salarissen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="20" value="20" alt="Sociale lasen">Sociale lasen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="21" value="21" alt="Pensioen lasten">Pensioen lasten</li>
</ul>

クラスomzet_firstのliのチェックボックスがオンになっている場合、次のli.omzet_firstまで、クラスomzet_secondのliの次のすべてのチェックボックスをオンにします。

私はこれを試しましたが、うまくいきませんでした

$('.omzet_first input:checked').each(function() {
    $(this).nextUntil(".omzet_first", ".omzet_second input:checkbox").prop("checked", true);
});

方法の提案はありますか？

4

2 に答える 2

4

イベントハンドラーの中にthisは、チェックボックスがあります。DOMツリーを適切にナビゲートする必要があります（.omzet_first兄弟を探す前にその親に移動してから、下に移動します）。.omzet_firstまた、セレクターもで使用する必要があることに注意してくださいnextUntil。

$('.omzet_first input:checked').each(function() {
    $(this).closest(".omzet_first")
           .nextUntil(".omzet_first")
           .find("input:checkbox")
           .prop("checked", true);
});
于 2012-07-17T07:51:37.970 に答える
3

.each()で選択された要素のループは、コードの実行時に:checkedチェックされているチェックボックスのいずれかを処理します。ユーザーがボックスをクリックしても応答しません。

ユーザーのクリックに応答するというアイデアの場合は、そのイベントを処理する必要があります。

$('.omzet_first input[type="checkbox"]').click(function() {
    $(this).parent().nextUntil(".omzet_first")
           .find('input[type="checkbox"]').prop("checked", this.checked);
});

そのコードを説明するには：omzet_firstチェックボックスの1つをクリックすると、その親（li）を見つけ、次までの親の兄弟をすべて選択し、それらのliomzet_first内の子チェックボックスを見つけてcheckedプロパティを設定します。（liが、$(this).closest(".omzet_first")代わりに使用する入力の直接の親ではなかった場合$(this).parent()。）

デモ： http： //jsfiddle.net/498vw/

于 2012-07-17T07:57:07.700 に答える