javascript - 带有可选 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

例如，单击 Group 1 将选择其中的所有内容，然后再次单击它将取消选择。而且您应该能够折叠组以获得更好的导航。如图所示（左侧的小箭头）

那里有这样的小部件吗？

谢谢

Answer 1

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

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>

干杯

编辑：添加崩溃。