Question

我有一个名为“other”的单选按钮，当我选中时，我想要一个名为“other-text”的输入字段显示出来。这很简单，但我整个上午都失败了。

<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />

这是我的javascript：

jQuery(function(){
    jQuery("input[name=other]").change(function(){          


        if ($(this).val() == "Yes") {
        jQuery("#other-text").show()
        }
        else {
        jQuery("#other-text").hide();
        }                                                            
   });
});

失败的JSFiddle。 http://jsfiddle.net/Wpt3Y/532/

Answer 1

我建议这样走。尝试使用prop()，但意识到您使用旧版jquery

jQuery("input:radio[name='ocalls']").change(function(){                                          
            if ($(this).attr("checked") == true) {
                jQuery("#other-text").show();
            }
            else {
                jQuery("#other-text").hide();
            }                                                            
       });

example with radio

相反，您可以使用复选框：

<强> HTML

<input name="ocalls" type="checkbox" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />

<强> JS

jQuery("input:checkbox[name='ocalls']").change(function(){                              
            if ($(this).attr("checked") == true) {
                jQuery("#other-text").show();
            }
            else {
                jQuery("#other-text").hide();
            }                                                            
       });

example with checkbox

Answer 2

这有效

jQuery("#other-radio").change(function(){...

Answer 3

刚刚更新了你的jsfiddle：http://jsfiddle.net/Wpt3Y/539/

<pre><input type="radio" name="other" id="other-radio" value="Yes"><b>Other</b></pre>

您的代码有效，您只是错误输入了无线电输入，它有两个名称属性。

Answer 4

<form>
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes">
   <b>Other</b><br />
</input>

<input type="text" name="other-text" id="other-text" style="display: none;" />          
</form>

jQuery(function(){
        jQuery("#other-radio").change(function(){          

            if ($(this).val() == "Yes") {
            jQuery("#other-text").show()
            }
            else {
            jQuery("#other-text").hide();
            }                                                            
       });
});

试试这个。

Answer 5

如果您想要切换效果，可以使用此代码和复选框。

jQuery(function(){
    jQuery("input[name=ocalls]").change(function(){                      
        if($(this).attr("checked"))
        {
           $("#other-text").show(); 
        }
        else
        {
            $("#other-text").hide();
        }
   });
});

Answer 6

您的代码无效，因为您在name按钮中有两次radio属性。

使用它：

<input type="radio" name="other" id="other-radio" value="Yes">

删除name="ocalls"属性。

如果使用jquery选中单选按钮，如何显示输入字段

6 个答案: