JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<div class="jobtypeHeadLghtRed inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level1" checked="'checked'" id="IsSelected_J_L1">    
        <div class="sectionHeaderText" id="JobType">level 1 item</div>
    </div>
    
    <div class="facilityHeadLghtBlue inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level2" checked="'checked'" id="IsSelected_J_L2">      
        <div class="sectionHeaderText" id="JobType">level 2 item</div>                     
    </div>
    
    <div class="HeadLghtGreen inputFields" id="jobTypeName">                      
        <input type="checkbox" class="checkbox Level3" checked="'checked'" id="IsSelected_J_L3">      
        <div class="sectionHeaderText" id="JobType">Level 3 item</div>                     
    </div>

JavaScript

$(function() {
    $(":checkbox").change(function() {
        
        var id = this.id;
        var level = id.substring(id.length - 1);

        if(level == 1){
            $('[class*="Level2"], [class*="Level3"]').attr('checked', this.checked); 
        }
        
        if(level == 2){
            $('[class*="Level3"]').attr('checked', this.checked); 
        }
  });
});