JSFiddle - React, Tailwind, and code Playground

by nonumber

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="control-group fltlft">
    <div class="controls">
        <div class="input-append">
            <input class="span2" id="treefilter" name="treefilter" size="16" type="text" placeholder="filter">
        </div>
    </div>
</div>
<div class="btn-group fltlft">
    <a class="btn dropdown-toggle noradiuslft" data-toggle="dropdown" href="#">
        Actions <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a id="treeCheckAll" href="#"><i class="icon-ok-sign"></i> Check all</a></li>
        <li><a id="treeUncheckAll" href="#"><i class="icon-remove-sign"></i> Uncheck all</a></li>
    </ul>
</div>
<div style="clear:both;"></div>

<hr />

<ul class="treecheckbox">
    <li class="expandable"><label for="node1" class="checkbox"><input type="checkbox" name="campo[]" id="node1" value="module1">Node 1</label> 
        <ul>
            <li class="expandable"><input type="checkbox" name="campo[]" id="node11" value="module2"><label for="node11">Node 1.1</label>
                <ul>
                    <li><input type="checkbox" name="campo[]" id="node111" value="module3"><label for="node111">Node 1.1.1</label>
                    
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li class="expandable"><input type="checkbox" name="campo[]" id="node12" value="module4"><label for="node12">Node 1.2</label>
                <ul>
                    <li><input type="checkbox" name="campo[]" id="node121" value="module5" checked><label for="node121">Node 1.2.1</label></li>
                    <li><input type="checkbox" name="campo[]" id="node122" value="module6"><label>Node 1.2.2</label></li>
                    <li class="expandable"><input type="checkbox" name="campo[]" id="node123" value="module7"><label>Node 1.2.3</label>
                        <ul>
                            <li><input...

CSS

body {
    font-family: verdana, arial;
    font-size: 0.8em;
    margin: 50px;
}
div.fltlft{float:left;}
.btn-group > a.btn.noradiuslft{
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
}
ul.treecheckbox, ul.treecheckbox li{
    margin: 0 5px;
    padding: 0 5px;
}
ul.treecheckbox ul.dropdown-menu li{
    margin: 0;
    padding: 0;
}
ul.treecheckbox li{list-style:none;clear:both;}
ul.treecheckbox li label{margin-left:5px;float:left;cursor:pointer;}
ul.treecheckbox li a.litoggle{float:left;margin-top:2px;margin-left:-16px;width:16px;height:16px;display:block;background:url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png) -24px -96px no-repeat;}
ul.treecheckbox li input{margin-left:3px;margin-right:3px;float:left;}
ul.treecheckbox li:hover > div.pull-left div.btn-group{display:block !important;}

JavaScript

jQuery(function($){
    var checkmenu = '<div class="pull-left"><div class="btn-group" style="margin-left: 6px; display:none;"><a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-mini"><span class="caret"></span></a><ul class="dropdown-menu"><li class=""><a class="checkall" href="javascript:;">Select all sub-items</a></li><li class=""><a class="uncheckall" href="javascript:;">Deselect all sub-items</a></li></ul></div></div>';
    $("li.expandable").each(function(){
        $li = $(this);
        if( $li.find("ul").length > 1 || $li.find("ul:first").children("li").length > 1 ) {
            $li.find("label:first").after(checkmenu);
        }
    });
    $("li.expandable").prepend('<a class="litoggle" href="javascript:;" />');
        
    $("li.expandable a.litoggle").click(function(){
        $li = $(this);
        $livisible = $li.parent().find("ul").is(":visible");
        // Take care of parent UL
        $li.css("background-position", ( $livisible ? '0 -96px' : '-24px -96px'))
           .parent()
           .find("ul")
           .toggle();
        // Take care of children image folders
        $li.parent()
           .find("ul li.expandable a")
           .css("background-position", ( $livisible ? '0 -96px' : '-24px -96px'));
        // Take care of children ULs
        if ($livisible)
        {
            $li.parent()
               .find("ul")
               .hide();
        }
        else
        {
            $li.parent()
               .find("ul")
               .show();
        }
    });

    $('#treefilter').keyup(function(){
        var text = $(this).val();
        $('.treecheckbox li').each(function(){
             if($(this).text().indexOf(text) == -1)
                 $(this).hide();
             else
                $(this).show();
        });     
    });
    $("#treeCheckAll").click(function()
    {
        $(".treecheckbox input").attr("checked","checked");
    });

    $("#treeUncheckAll").click(function()
    {
       ...