jquery focus event doesnt seem to be working properl

Question

Am trying to use the jquery focus event for handling the following:

there are three criterion for search, i.e. Post code, city, radius. user can select a sinngle one and that is shown by the radio button.

the requirement is that when a user clicks a text box , its corresponding radio button should get selected but that doesnt seem to be working properly.

the jquery is as under:

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

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

the html is as under

<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-->

it works on first couple of times then no radio button is checked. any help is appreciated.

Answer 1

You need to be using prop() to set checked (as it is a property), not attr():

$(".criteria input[type='text']").focus(function(){
    $(".criteria input[type='radio']").prop('checked', false);   
    $(this).parent().find("input[name='SearchRange']").prop('checked',true);
});

jsFiddle here.

Answer 2

Use .prop() instead of .attr()

$(".criteria input[type='text']").focus(function(){
    $(".criteria input[type='radio']").prop('checked', false);   
    $(this).parent().find("input[name='SearchRange']").prop('checked',true);
});

Also visit .prop() vs .attr()

DEMO