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

Question

我有一个名为“其他”的单选按钮，当选中该按钮时，我希望显示一个名为“其他文本”的输入字段。 这很简单，但是我整个上午都在失败。

<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();
            }                                                            
       });

收音机的例子

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

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();
            }                                                            
       });

复选框示例

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

您的代码不起作用，因为您在radio按钮中两次拥有name属性。

用这个：

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

删除name="ocalls"属性。