JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="checkbox" name="JobType[]" id="nineteen" class="visiChk" value="19"  /> Plumbing
<label id="hiddenLabel" style="color:silver; /*display:none*/">
    <input type="checkbox" name="JobType[]" class="visiChk" id="seventeen" value="17" /> Plumbing
    <input type="checkbox" name="JobType[]" class="visiChk" id="eighteen" value="18" /> Plumbing
</label>

JavaScript

// update if any are checked/unchecked
    $('.visiChk').change(function() {
        var hiddenLabel = $('#hiddenLabel')[0];
        var seventeen = $('#seventeen')[0];
        var eighteen = $('#eighteen')[0];

        // Are any of them checked ?
		console.log($('#nineteen:checked').length);
		
        if ($('#nineteen:checked').length > 0) {
            hiddenLabel.style.display = 'block';
            seventeen.checked = true;
            eighteen.checked = true;
        } else {
			// Commenting this out so the hidden fields stay visible for demo purposes
            //hiddenLabel.style.display = 'none'; 
            seventeen.checked = false;
            eighteen.checked = false;
        }
    });