JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div id="docbuilder" class="db form">
    <div class="document">
        <div class="section inline">
            <label class="label_radio lightblue" id="selectAllButton" for="selectAll">
                <input type="radio" name="masscheck" id="selectAll" />Select all</label>
        </div>
        <div class="section inline">
            <label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
                <input type="radio" name="masscheck" id="selectNone" />Select none</label>
        </div>
        <div class="clear"></div>
    </div>
    <div class="document">
        <div class="section">
            <label class="label_check section_label blue" for="docs_1131">
                <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
        </div>
    </div>
    <div class="document">
        <div class="section">
            <label class="label_check section_label blue" for="docs_1118">
                <input type="checkbox" id="docs_1118" name="docs" value="1118" />Section 1</label>
            <blockquote>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1119">
                        <input type="checkbox" id="docs_1119" name="docs" value="1119" />Subsection 1.1</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1120">
                        <input type="checkbox" id="docs_1120" name="docs" value="1120" />Subsection 1.2</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1121">
                        <input type="checkbox" id="docs_1121" name="docs" value="1121" />Subsection 1.3</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1122">
        ...

CSS

.c_on {
    color:red;
}

JavaScript

$('#selectAllButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});

$('.section .section_label input').click(function () {
    
    var chckClass = "";
    if (!this.checked) {
        chckClass = ""; 
    } else {
       chckClass = "c_on"
    }
    $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
     var chckClass = "";
    if (!this.checked) {
        chckClass = ""; 
    } else {
       chckClass = "c_on"
    }
    $(this).closest('label').removeClass('c_on').addClass(chckClass);
});