JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
    <input type="radio" class="phy_clp" id="phy_clp" value="yes" name="phy_clp" />Yes
    <input type="radio" class="phy_clp" checked id="phy_clp" value="no" name="phy_clp" />No
    <div id="phyexpy" class="wrk_exp">
        <div class="row control-groups">
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" class="chk_Field" id="chk_Vis" name="checkboxes" />
                <label>Vision</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" class="chk_Field" id="chk_Hear" name="checkboxes" />
                <label>Hearing</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" class="chk_Field" id="chk_Mob" name="checkboxes" />
                <label>Mobility</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" class="chk_Field" id="chk_Ler" name="checkboxes" />
                <label>Learning</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" class="chk_Field" id="chk_Med" name="checkboxes" />
                <label>Medical</label>
            </div>
        </div>
    </div>
</form>

JavaScript

$(document).ready(function () {
    $("#phyexpy").css("display", "none");
    $(".phy_clp").click(function () {
        var inputValidation = $('input[name=phy_clp]:checked').val();
        if (inputValidation == "yes") {
            alert("can we check now");
            $phyexpyDiv.show();
        }
        if ($('input[name=checkboxes]:checked').length === 0) {
            //$(".educationForm").validate().element(".chk_Field");
            update_errors();
            $(".chk_Field").addClass(".errRed_chkb");
            alert('Please select atleast one checkbox');
        } else {
            $phyexpyDiv.hide();
        }
    });
});