JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<ul class="treeMenu treeview"><li class="last"><treechild class="6a5e8fd2-db74-4076-ad58-290be1b1c825">&nbsp;</treechild><span><span class="contLabel ColContId"><a href="javascript:void(0)" data-contid="6a5e8fd2-db74-4076-ad58-290be1b1c825" class="showTreeChild show-child checked" title="Show Child Containers">+ </a><input type="checkbox" data-conttype="GAYLORD" title="Select to sweep it." class="treeCheckBox" name="treeCheckBox" data-contid="GAYLORD_LM8oev_Z">GAYLORD_LM8oev_Z</span><span class="conType ColContType">GAYLORD</span><span class="colCount">38&nbsp;Items</span><span class="colSFilter">CVG5</span></span><ul class="treeMenu hidden"><li><treechild class="61f77dbf-57ef-4aef-aebe-b0f79db63c72">&nbsp;</treechild><span><span class="contLabel ColContId"><input type="checkbox" data-conttype="PACKAGE" title="Select to sweep it." class="treeCheckBox" name="treeCheckBox" data-contid="SD9KzXxZcN_001_v">SD9KzXxZcN_001_v</span><span class="conType ColContType">PACKAGE</span><span class="colCount"></span><span class="colSFilter">CVG5</span></span></li><li><treechild class="b40b354f-94f6-4b08-bd50-4fb7601c764c">&nbsp;</treechild><span><span class="contLabel ColContId"><input type="checkbox" data-conttype="PACKAGE" title="Select to sweep it." class="treeCheckBox" name="treeCheckBox" data-contid="SDRwQZMZHN_001_v">SDRwQZMZHN_001_v</span><span class="conType ColContType">PACKAGE</span><span class="colCount"></span><span class="colSFilter">CVG5</span></span></li><li><treechild class="f20500e0-d0ef-486f-acb3-e20c1fcb246a">&nbsp;</treechild><span><span class="contLabel ColContId"><input type="checkbox" data-conttype="PACKAGE" title="Select to sweep it." class="treeCheckBox" name="treeCheckBox" data-contid="SD01n8JZQN_001_v">SD01n8JZQN_001_v</span><span class="conType ColContType">PACKAGE</span><span class="colCount"></span><span class="colSFilter">CVG5</span></span></li><li><treechild class="54fee95f-92a4-46ff-ba6c-e196783589cf">&nbsp;</treechild><span><span...

JavaScript

//parents(':eq(1)');
$(document).undelegate("input:checkbox[name='treeCheckBox']", "click").delegate("input:checkbox[name='treeCheckBox']", "click", function () {
    var $elem = $(this);
    console.log("h11i");
    if ($elem.is(":checked")) {
        $elem.parents(':eq(1)').next('ul').find('input:checkbox[name="treeCheckBox"]').attr('checked', 'checked');
        console.log("hi2");
    } else {
        $elem.parents(':eq(1)').next('ul').find('input:checkbox[name="treeCheckBox"]').removeAttr('checked');
        console.log("hi3s");
    }
});