Question

嘿呀，我的单选按钮有问题我有这3个按钮

No <input type="radio" name="answer" checked="checked" value="no"/> 
Yes<input type="radio" name="answer" value="yes"/> 
Other <input type="radio" name="answer" value="other"/>

我也有这个文本框

<input style="display:none;" type="text" name="otherAnswer" id="otherAnswer"/>

如果用户选择值为“other”的单选按钮，则显示文本框，如果其他任何内容不显示文本框。

我对Jquery相当新，我已经查找了这个语法，但它对我来说都是希腊语。如果有人能指出我正确的方向，那就太棒了！

Answer 1

$("input[type='radio']").change(function(){

   if($(this).val()=="other")
   {
      $("#otherAnswer").show();
   }
   else
   {
       $("#otherAnswer").hide(); 
   }

});

以下是工作示例：http://jsfiddle.net/Wc2GS/8/

Answer 2

$(":radio").on('click',function (){

if ($(this).is(":checked") && $(this).val()=='other') ) $('#otherAnswer').show(); else $('#otherAnswer').hide();

});

Answer 3

我认为这更有效。

$("input[name='answer']").change(function(){

    if($(this).val() == "yes")
    {
        $("#otherAnswer").show();
    }else{
        $("#otherAnswer").hide();
    }
});

Answer 4

尽管如果您热衷于使用jquery / javascript，上面的答案就足够了，但是仅使用CSS即可轻松实现。在Codepen上尝试。

#otherAnswer {
    display: none;
}
#other:checked ~ #otherAnswer {
    display: flex;
}

<div>
No<input type="radio" id="no" name="answer" checked="checked" value="no"/>

Yes<input type="radio" id="yes" name="answer" value="yes"/>


Other<input type="radio" id="other" name="answer" value="other"/> 
        

<input type="text" id="otherAnswer" name="otherAnswer"/>
</div>

Answer 5

$('input[name=answer]').change(function(){
    if(this.value) == 'yes'{
        $('#otherAnswer').show();
    }else{
        $('#otherAnswer').hide();
    }
})

如果选中单选按钮则显示文本框Jquery

5 个答案: