JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<table id="candy" >
	<tr id="dd">
		<th><input type="checkbox" id="bbbbbb" /></th>
		<th width="20">a</th>
		<th width="20">b</th>
		<th width="20">c</th>
		<th width="20"">d</th>
		<th width="20">e</th>
		<th width="20">f</th>
		<th width="20">g</th>
		<th width="20">h</th>
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>                                 
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>                                  
	</tr>
    <tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>                                  
	</tr>
</table>

CSS

tr.selected {
        background-color: #FEF0BF;
    }

JavaScript

$("#candy input[type=checkbox]").on("change", function () {
            if($(this).attr('id')!='bbbbbb'&&$('#bbbbbb').is(':checked')){
            	$('#bbbbbb').attr('checked', false);  
            }
            if (this.checked) {
                $(this).parents('tr').addClass('selected');
                $('#dd').removeClass('selected');
            } else {
                $(this).parents('tr').removeClass('selected');
                $('#dd').removeClass('selected');
            }
            if(!$('#bbbbbb').is(':checked')&&$('.asdf:checked').length==3){
            	$('#bbbbbb').click();  
            }
        });


        $('#bbbbbb').click(function () {
            var checked = $("#bbbbbb").is(':checked');
            $(".asdf").each(function () {
                $(this).prop('checked', checked);
                if (checked) {
                    $(this).parents('tr').addClass('selected');
                    $('#dd').removeClass('selected');
                }
                else {
                    $(this).parents('tr').removeClass('selected');
                    $('#dd').removeClass('selected');
                }
            });
        });