JSFiddle - React, Tailwind, and code Playground
HTML
<p>Language options:</p>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="langOptionRadioBtn" value="Single" id="langOptionRadioBtn_0" checked />
Single</label>
<label>
<input type="radio" name="langOptionRadioBtn" value="Multi" id="langOptionRadioBtn_1" />
Multi</label>
<br />
</p>
<p>Languages: </p>
<p>
<label>
<input type="checkbox" name="langCheckBoxes" value="English" id="langCheckBoxes_0" />
English</label>
<br />
<label>
<input type="checkbox" name="langCheckBoxes" value="French" id="langCheckBoxes_1" />
French</label>
<br />
<label>
<input type="checkbox" name="langCheckBoxes" value="Spanish" id="langCheckBoxes_2" />
Spanish</label>
<br />
<label>
<input type="checkbox" name="langCheckBoxes" value="Russian" id="langCheckBoxes_3" />
Russian</label>
<br />
<label>
<input type="checkbox" name="langCheckBoxes" value="Arabic" id="langCheckBoxes_4" />
Arabic</label>
<br />
<label>
<input type="checkbox" name="langCheckBoxes" value="Chinese" id="langCheckBoxes_5" />
Chinese</label>
<br />
</p>
</form>
<p id="output"></p>
JavaScript
var $form = $('#form1');
var $checkboxes = $('input[type=checkbox]');
var $selectionType = $('input[type=radio]');
var $output = $('#output');
// Used to determine if the Multi radio is selected
var isMulti = false;
// Listen to change event on the radio buttons and set isMulti
$selectionType.on('change', function( e ) {
// Check the value of what radio button was clicked
isMulti = $( e.target ).val() === 'Multi';
// Clear all selected checkboxes if user clicked "single"
if( !isMulti ) {
$checkboxes.each( function( idx, item ) {
$( item ).prop( 'checked', false );
});
}
});
// Listen to clicks on checkboxes
$checkboxes.on('change', function( e ) {
// Store what was just clicked
var $this = $( e.target );
// If Multi is not selected, then remove the check from all checkboxes except
// the one that the user actually clicked on
if( !isMulti ) {
$checkboxes.each( function( idx, item ) {
var $item = $( item );
if( $item.attr('id') === $this.attr('id') ) {
return true;
}
$item.prop('checked', false );
});
}
});