JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset>
<p>Which of the following services would you like to start providing? (check all that apply)<span class="required">* </span><label for="med_field_005[]" class="error">This is a required field.</label></p>
<label for="med_field_005_messboards" class="clearfix">
<input type="checkbox" name="med_field_005[]" id="med_field_005_messboards" value="Message boards " class="required" tabindex="17">Message boards
</label>
<label for="med_field_005_linkedin" class="clearfix">
<input type="checkbox" name="med_field_005[]" id="med_field_005_linkedin" value="LinkedIn group " tabindex="18">LinkedIn group
</label>
<label for="med_field_005_newsletter" class="clearfix">
<input type="checkbox" name="med_field_005[]" id="med_field_005_newsletter" value="Newsletter " tabindex="19">Newsletter
</label>
<label for="med_field_005_other" class="clearfix">
<input type="checkbox" name="med_field_005[]" id="med_field_005_other" value="Other" tabindex="20">Other
</label>
</fieldset>
<div id="provideServices">
<fieldset>
<p><label for="short_field_008">If Other please specify)</label>
<input type="text" name="short_field_008" id="short_field_008" tabindex="21" /></p>
</fieldset>
</div>
JavaScript
$(function() {
$("#med_field_005_other").click(function(){
if ($("#med_field_005_other").is(":checked"))
{
$('#short_field_008').addClass('required');
$("#provideServices").show();
alert($('#short_field_008').attr('class'));
}
else
{
$('#short_field_008').removeClass('required');
$("#provideServices").hide();
alert($('#short_field_008').attr('class'));
}
});
$("#provideServices").hide();
var selector = "#med_field_005_messboards, #med_field_005_linkedin, #med_field_005_newsletter";
$(selector).click(function(){
$('#short_field_008').removeClass('required');
});
});