JSFiddle - React, Tailwind, and code Playground
HTML
<form id="optionForm">
<div id="chooseSource">
<div class="selected">
<input type="radio" id="source1" name="source" value="www" checked="checked" />
<label for="source1">Website</label>
</div>
<div>
<input type="radio" id="source2" name="source" value="mag" />
<label for="source2">Magazine</label>
</div>
<div>
<input type="radio" id="source3" name="source" value="per" />
<label for="source3">Friend</label>
</div>
<div>
<input type="radio" id="source4" name="source" value="oth" />
<label for="source4">Other</label>
</div>
<div id="cbHolder">
<span>
<input type="checkbox" id="sourceCb1" name="sourceCb" value="" />
<label for="sourceCb1">Checkbox item 1 for other</label>
</span>
<span>
<input type="checkbox" id="sourceCb2" name="sourceCb" value="" />
<label for="sourceCb2">Checkbox item 2 for other</label>
</span>
<span>
<input type="checkbox" id="sourceCb3" name="sourceCb" value="" />
<label for="sourceCb3">Checkbox item 3 for other</label>
</span>
</div>
</div>
</form>
CSS
.selected { color: red }
JavaScript
$("#chooseSource input:radio").change(function(e){
$("#chooseSource input:radio").parent().removeClass("selected")
$(this).parent().addClass("selected");
});
$("#chooseSource input:checkbox").change(function(){
//toggle class for this select box
$(this).parent().toggleClass("selected");
if($(this).is(":checked")){
//remove all classes from radio boxes
$("#chooseSource input:radio").parent().removeClass("selected")
$(this).parent().parent().prev().find("input:radio").attr("checked", true);
$(this).parent().parent().prev().find("input:radio").parent().addClass("selected");
}
});