Question

我试图使用jquery焦点事件来处理以下内容：

搜索有三个标准，即邮政编码，城市，半径。用户可以选择一个单词，并通过单选按钮显示。

要求是当用户点击文本框时，应该选择相应的单选按钮，但这似乎没有正常工作。

jquery如下：

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

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

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

它可以在前几次工作，然后没有选中单选按钮。任何帮助表示赞赏。

Answer 1

您需要使用 prop() 来设置checked（因为它是属性），而不是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

使用.prop()代替.attr()

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

另请访问 .prop() vs .attr()

DEMO

jquery焦点事件似乎没有正常工作

2 个答案: