JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<table class="tablefull">
    <tr class="heading">
        <td class="text">Course(s)</td>
        <td class="statsbig">Course Number</td>
        <td class="stats">Survey</td>
        <td class="stats">Reports</td>
        <td class="stats">Possible</td>
        <td class="stats">Complete</td>
        <td class="stats">Select</td>
    </tr>
    <tr id="row1" class="evenrow" data-level="1">
        <td class="textlevel1">Level 1 With Children</td>
        <td class="statsbig"></td>
        <td class="stats">&nbsp;</td>
        <td class="stats">&nbsp;</td>
        <td class="stats">1486</td>
        <td class="stats">1 (0%)</td>
        <td class="stats">
            <button class="checkAll">Select All</button>
        </td>
    </tr>
    <tr id="row2" class="evenrow" data-level="2">
        <td class="textlevel2">Level 2 With Children</td>
        <td class="statsbig"></td>
        <td class="stats">&nbsp;</td>
        <td class="stats">&nbsp;</td>
        <td class="stats">107</td>
        <td class="stats">1 (1%)</td>
        <td class="stats">
            <button class="checkAll">Select All</button>
        </td>
    </tr>
    <tr id="row3" class="evenrow" data-level="3">
        <td class="textlevel3">Level 3</td>
        <td class="statsbig">625.417.31</td>
        <td class="stats">	<font color="#009933">Open</font>

        </td>
        <td class="stats">	<font color="#FF0000">Closed</font>	
        </td>
        <td class="stats">13</td>
        <td class="stats">1 (8%)</td>
        <td class="stats">
            <input name="ci_id" id="ci_id" type="checkbox" value="101770" />
        </td>
    </tr>
    <tr id="row4" class="evenrow" data-level="3">
        <td class="textlevel3">Level 3</td>
        <td class="statsbig">625.417.31</td>
        <td class="stats">	<font color="#009933">Open</font>

        </td>
        <td class="stats">	<font color="#FF0000">Closed</font>	
        </td>
        <td class="stats">13</td>
        <td class="stats">1...

CSS

.textlevel2 {
    padding-left: 20px;
}
.textlevel3 {
    padding-left: 40px;
}
.textlevel4 {
    padding-left: 60px;
}

JavaScript

$(".checkAll").click(function (event) {
    event.preventDefault();

    var $button = $(event.target),
        $row = $button.closest('tr'),
        level = +$row.data('level'),
        prevLevel = level // initialize for 'while' loop
        $next = $row, // initialize for 'while' loop
        deeperLevelFound = false, // initialize for 'while' loop
        deeperLevels = []; // empty selector


    while ($next.length && !deeperLevelFound) {
        $next = $next.next(); // next :)
        var nextLevel = +$next.data('level');
        if (nextLevel < prevLevel && nextLevel <= level) {
            deeperLevelFound = true;
        } else {
            prevLevel = nextLevel;
            deeperLevels.push($next.get(0));
        }
    }

    var $deeperLevels = $(deeperLevels);

    if ($deeperLevels.length) {
        var $checkboxes = $deeperLevels.map(function (i, row) {
            var $row = $(row),
                $checkbox = $row.find('input[type=checkbox]');
            return $checkbox.get();
        });

        $checkboxes.prop('checked',
        // a toggle that sets to true if any one is unchecked
        $checkboxes.filter(':not(:checked)').length);
    }
});