1

次のような jQuery ウィジェットを探しています。例

たとえば、複数のグループを持つことができます。

Group 1
- Sub 1 1
- Sub 1 2
- Sub 1 3
Group 2
- Sub 2 1
Group 3
- Sub 3 1
- Sub 3 2

たとえば、グループ 1 をクリックすると、内部のすべてが選択され、もう一度クリックすると選択が解除されます。また、ナビゲーションを改善するためにグループを折りたたむこともできます。画像のように（左側の小さな矢印）

このようなウィジェットはありますか？

ありがとう

4

2 に答える 2

1

私がまとめたこの小さなjsfiddleは、あなたが望むことをするはずです:

http://jsfiddle.net/RdaCy/

グループ/サブグループを追加するには、それに応じてID番号を変更するだけです:)、変更してほしい点がある場合、またはさらに手を加える必要がある場合は、教えてください:)

于 2012-06-04T19:59:26.257 に答える
1

JQuery:

$(document).ready ( function () 
{
    $('.parent').click(function () {
        var set = false;
        if ($(this).is(':checked'))
            set = true;
        $(this).parent().find('ul li').each( function () {
            var Input = $(this).find('input');
            Input.attr('checked', set);
        });     
    });
    $('span').click(function () {
        if ($(this).text() == '-')
            $(this).html('+');
        else
            $(this).html('-');
        $(this).parent().find('ul li').each( function () {
            $(this).slideToggle();
        });
    });
});

html:

<ul>
   <li>
      <span>-</span><input type="checkbox" value="a" class="parent" /> a
      <ul>
         <li><input type="checkbox" value="a1" /> a1</li>
         <li><input type="checkbox" value="a2" /> a2</li>
      </ul>
   </li>
   <li>
      <span>-</span><input type="checkbox" value="b" class="parent" /> b
      <ul>
         <li><input type="checkbox" value="b1" /> b1</li>
         <li><input type="checkbox" value="b2" /> b2</li>
      </ul>
   </li>
</ul>

乾杯

編集:折りたたみを追加しました。

于 2012-06-04T20:16:00.380 に答える