Question

I am looking for a jQuery widget that looks like the following:

It allows you to have several groups for example:

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

Clicking on Group 1 for example, will select everything inside, and clicking it again will deselect.
And also you should be able to collapse the groups for better navigation. Like seen in the image (the small arrow on the left side)

Is there a widget like this out there?

Thanks

Answer 1

The 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();
        });
    });
});

The 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>

Cheers

EDIT: Added collapse.