JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<label class="checkbox inline">
<input type="checkbox" id="solutionImplemented1" value="option1"> Yes
</label>
<label class="checkbox inline">
<input type="checkbox" id="solutionImplemented2" value="option2"> No
<label class="checkbox inline">
<input type="checkbox" id="solutionImplemented3" value="option2"> ?
</label>
 <hr />
                            
<div id="solutionImplementedContent1" style="display:none"><!-- yes -->
solutionImplementedContent1 - YES
</div><!-- #yes -->

<div id="solutionImplementedContent2" style="display:none"><!-- no -->
solutionImplementedContent2 - NO
</div><!-- #no -->
    
<div id="solutionImplementedContent3" style="display:none"><!-- ? -->
solutionImplementedContent2 - ?
</div><!-- #? -->

JavaScript

$('#solutionImplemented1').click(function () {
    // uncheck the other checkbox and hide other content if this is checked
    if (this.checked) {
        $('#solutionImplemented2').attr('checked',false);
        $('#solutionImplementedContent2').hide(this.checked);
    }
    // show correct content
    $('#solutionImplementedContent1').toggle(this.checked);
});
$('#solutionImplemented2').click(function () {
    // uncheck the other checkbox and hide other content if this is checked
    if (this.checked) {
        $('#solutionImplemented1').attr('checked',false);
        $('#solutionImplementedContent1').hide(this.checked);
    }
    // show correct content
    $('#solutionImplementedContent2').toggle(this.checked);
});