JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="affiliationBlock">
    <p>I am applying primarily as a:</p>
    <input id="affiliation_fdoh" type="radio" name="affiliation" value="FDOH" />
    <label for="affiliation_fdoh">Florida DOH Employee</label>
    
    <input id="affiliation_usf" type="radio" name="affiliation" value="USF" />
    <label for="affiliation_usf">USF Student</label>
</div>

<div id="roleBlock">
    <p>I wish to participate as a:</p>
    <input id="role_mentor" type="radio" name="role" value="Mentor" />
    <label for="role_mentor">Mentor</label>
    
    <input id="role_mentee" type="radio" name="role" value="Mentee" />
    <label for="role_mentee">Mentee</label>
</div>

<button id="check">Check It!</button>

CSS

body {
    font-family: sans-serif;
}
div {
    overflow: hidden;
    margin: 0 0 24px;
}
p {
    color: #444;
    border-bottom: 1px solid #ddd;
    margin: 8px 0;
}
label {
    display: block;
    margin-bottom: 12px;
}
input {
    clear: left;
    float: left;
    margin: 2px 4px;
}

JavaScript

$('#roleBlock').hide();

$('#affiliation_fdoh').click(function(){
    $('#roleBlock').filter(':hidden').fadeIn(300);
    $('#role_mentee').attr('checked', false);
});
$('#affiliation_usf').click(function(){
    // if they are a USF student, make sure mentor/mentee is hidden
    $('#roleBlock').filter(':visible').fadeOut(300);
    // and assume mentee
    $('#role_mentee').attr('checked', 'checked');
});

$('#check').click(function(){
    var role = $('input:radio[name=role]:checked').val(),
        affiliation = $('input:radio[name=affiliation]:checked').val();
    
    alert ('An applicant from ' + affiliation + ' is applying as a ' + role + '.');
});