JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<div class="parent">parent 
    <input class="parent" type="checkbox" />
    <div>children <input class="children" type="checkbox" /></div>
    <div>children <input class="children" type="checkbox" /></div>
</div>

<div class="parent">parent 
    <input class="parent" type="checkbox" />
    <div>children <input class="children" type="checkbox" /></div>
    <div>children <input class="children" type="checkbox" /></div>
</div>

JavaScript

var parentClassName = ".parent";
var childrenClassName = ".children";

$("input:checkbox" + parentClassName).on("change", function() {
    
    $(this).parent().find("input:checkbox" + childrenClassName).prop("checked", $(this).is(':checked'));
});

$("input:checkbox" + childrenClassName).on("change", function() {
    var parentDiv = $(this).closest("div.parent");
    
    var parent = parentDiv.find("input:checkbox" + parentClassName).first();
    
    var isParentChecked = true;
    var childs = parentDiv.find("input:checkbox" + childrenClassName);
    $.each(childs, function(index, val) {
        if (!$(val).is(":checked")) {
            isParentChecked = false;
            return;
        }
    });
    
    if (isParentChecked) {
        if (!parent.is(":checked")) {
            parent.prop("checked", true);
        }
    } else {
        if (parent.is(":checked")) {
            parent.prop("checked", false);
        }
    }
});