-1

こんにちは私は次の構造を持っています：

<ul class="main">
  <li class="toggle">
   <input type="checkbox"> information
  </li>
  <ul>
<li class="modulo">
   <input type="checkbox"> General
</li>
<ul>
   <li class="example1">
    <input type="checkbox">
   </li>
   <li class="example2">
    <input type="checkbox">
   </li>
</ul>
  </ul>
</ul>

メインの親チェックボックスがユーザーによってチェックされたときに、すべての子チェックボックスを「チェック済み」に設定する方法を知る必要があります

私はjQueryを使用しています、ありがとう

4

3 に答える 3

2

次のようにマークアップを変更できます。

<ul class="main">
  <li class="toggle">
   <input type="checkbox"> information
    <ul>
     <li class="example1">
      <input type="checkbox">
     </li>
     <li class="example2">
      <input type="checkbox">
     </li>
   </ul>
  </li>   

  <li class="modulo">
   <input type="checkbox"> General
   <ul>
     <li class="example1">
      <input type="checkbox">
     </li>
     <li class="example2">
      <input type="checkbox">
     </li>
   </ul>
  </li>
</ul>

jQuery

$('ul.main > li > :checkbox').change(function() {
    $(this).next('ul').find(':checkbox').prop('checked', this.checked);
});
于 2012-07-04T16:19:01.800 に答える
0

マークアップを修正した場合:

<ul class="main">
    <li class="toggle">
        <input type="checkbox"> information
        <ul>
            <li class="modulo">
            <input type="checkbox"> General
            <ul>
                <li class="example1">
                <input type="checkbox">
                </li>
                <li class="example2">
                <input type="checkbox">
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

...これでうまくいくはずです：

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

実例| ソース

次に、逆のケースを処理する必要があります (先祖のチェックを外すと、親のチェックを外して、すべての先祖がチェックされなくなります) が、それは演習として残しておきます。

于 2012-07-04T16:19:09.553 に答える
-1

これはチェックを切り替えます: http://jsfiddle.net/

読みやすくするために、コードをインデントすることをお勧めします。

于 2012-07-04T16:23:03.267 に答える