带有可选择的optgroup的jQuery多选小部件

Question

我正在寻找一个类似于以下内容的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将选择内部的所有内容，然后再次单击它将取消选择。 此外，您应该能够折叠组以获得更好的导航。就像在图像中看到的那样（左侧的小箭头）

那里有这样的小部件吗？

由于

Answer 1

我放在一起的这个小小的傻瓜应该做你想做的事：

http://jsfiddle.net/RdaCy/

要添加更多组/子组，只需相应更改ID号:)，如果有任何方面您希望我更改，或者如果您需要更进一步的手，请告诉我：）

Answer 2

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>

干杯

编辑：添加了崩溃。