JSFiddle - React, Tailwind, and code Playground

by David Avellan

HTML

<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="form-group">
        <input class="form-control" type="text" name="s" value="" placeholder="Search…" maxlength="50" required="required" />
    </div>
    <p>Refine search to posts containing chosen tags:</p>
    <div class="acidjs-css3-treeview">
        <ul>
            <li>
                <input type="checkbox" id="node-0" />
                <label>
                    <input type="checkbox" name="tag[]" value="node-0" /><span></span>
                </label>
                <label for="node-0">node-0</label>
                <ul>
                    <li>
                        <input type="checkbox" id="node-0-0" />
                        <label>
                            <input type="checkbox" name="tag[]" value="node-0-0" /><span></span>
                        </label>
                        <label for="node-0-0">node-0-0</label>
                        <ul>
                            <li>
                                <input type="checkbox" id="node-0-0-0" />
                                <label>
                                    <input type="checkbox" name="tag[]" value="node-0-0-0" /><span></span>
                                </label>
                                <label for="node-0-0-0">node-0-0-0</label>
                            </li>
                            <li>
                                <input type="checkbox" id="node-0-0-1" />
                                <label>
                                    <input type="checkbox" name="tag[]" value="node-0-0-1" /><span></span>
                                </label>
                                <label for="node-0-0-1">node-0-0-1</label>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="node-1" />
                <label>
                    <input type="checkbox"...

CSS

/*
 * Imageless CSS3 Treeview with Checkbox Support
 * @namespace window.AcidJs
 * @class CSS3Treeview
 * @version 3.0
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

 .acidjs-css3-treeview, .acidjs-css3-treeview * {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align:left !important;
}
.acidjs-css3-treeview label[for]::before, .acidjs-css3-treeview label span::before {
    content:"\25b6";
    display: inline-block;
    margin: 2px 0 0;
    width: 13px;
    height: 13px;
    vertical-align: top;
    text-align: center;
    color: #e74c3c;
    font-size: 8px;
    line-height: 13px;
}
.acidjs-css3-treeview li ul {
    margin: 0 0 0 22px;
}
.acidjs-css3-treeview * {
    vertical-align: middle;
}
.acidjs-css3-treeview {
    font: normal 16px/18px"Segoe UI", Arial, Sans-serif;
}
.acidjs-css3-treeview li {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.acidjs-css3-treeview input[type="checkbox"] {
    display: none;
}
.acidjs-css3-treeview label {
    cursor: pointer;
}
.acidjs-css3-treeview label[for]::before {
    -webkit-transform: translatex(-24px);
    -moz-transform: translatex(-24px);
    -ms-transform: translatex(-24px);
    -o-transform: translatex(-24px);
    transform: translatex(-24px);
}
.acidjs-css3-treeview label span::before {
    -webkit-transform: translatex(16px);
    -moz-transform: translatex(16px);
    -ms-transform: translatex(16px);
    -o-transform: translatex(16px);
    transform: translatex(16px);
}
.acidjs-css3-treeview input[type="checkbox"][id]:checked ~ label[for]::before {
    content:"\25bc";
}
.acidjs-css3-treeview input[type="checkbox"][id]:not(:checked) ~ ul {
    display: none;
}
.acidjs-css3-treeview label:not([for]) {
    margin: 0 8px 0 0;
}
.acidjs-css3-treeview label span::before {
    content:"";
    border: solid 1px...

JavaScript

$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function () {
    var
    checkbox = $(this),
        selectNestedListCheckbox = checkbox.parents("li").children("label").children("input"),
        siblingCheckboxes = checkbox.parentsUntil("ul", "li").children("label").children("input");

    if (checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
    selectNestedListCheckbox.prop("checked", false);
});