JSFiddle - React, Tailwind, and code Playground

by Satpal Singh

HTML

<section class="row searchgroup criteria">
    <section class="col-xs-12">
        <div class="fieldgroup">
            <input type="radio" name="SearchRange" id="PostalCode" />
            <label for="PostalCode">Postal Code</label>
            <input type="text" id="PostalCodeTxt" placeholder="PostalCode" />
            <div class="clear">&nbsp;</div>
        </div>
        <div class="fieldgroup">
            <input type="radio" name="SearchRange" id="City" />
            <label for="City">City</label>
            <input type="text" id="CityTxt" placeholder="City" />
            <div class="clear">&nbsp;</div>
        </div>
        <div class="fieldgroup">
            <input type="radio" name="SearchRange" id="SearchRadius" />
            <label for="SearchRadius">Search Radius</label>
            <input type="text" id="SearchRadiusTxt" placeholder="SearchRadius" />
            <div class="clear">&nbsp;</div>
        </div>
    </section>
</section>
<!--searchgroup-->

JavaScript

$(".criteria input[type='text']").focus(function () {
    $(".criteria input[type='radio']").prop('checked', false);

    $(this).parent().find("input[name='SearchRange']").prop('checked', true);
});