单选按钮的Javascript功能其他选项

Question

我创建了一个radio按钮供选择，当用户单击时还有一个“其他”按钮，它将打开text-box以便用户可以在其中手动指定一些文本。

<label><input type="radio" name="option" value="">Web</label>

<label><input type="radio" name="option" value="">Mobile Apps</label>

<label><input type="radio" name="option" value="other">Other</label>
<input typt="text" placeholder="Specify here" id="other-text">

和JavaScript

$(".option").change(function () {
//check if the selected option is others
if (this.value === "other") {
    //toggle textbox visibility
    $("#other-text").toggle();
}
});

这是我尝试过的方法，但是某种程度上它不起作用。 我是javascript新手，请帮帮我。

提前致谢。

如果可能，您还能告诉我如何放置jsfiddle/codepen链接吗？

Answer 1

请尝试以下方法：

 $(".js-option").click(function () { //check if the selected option is others if ($(this).val() == "other") { $("#other-text").show(); }else{ $("#other-text").hide(); } }); 

 #other-text{ display:none; } 

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <label><input type="radio" name="option" class="js-option" value="">Web</label> <label><input type="radio" name="option" class="js-option" value="">Mobile Apps</label> <label><input type="radio" name="option" class="js-option" value="other">Other</label> <input typt="text" placeholder="Specify here" id="other-text"> 

Answer 2

尝试这个

JAVASCRIPT

$("[name='option']").change(function () {
    //check if the selected option is others
    if (this.value === "other") {
        //toggle textbox visibility
        $("#other-text").show();
    } else {
        //toggle textbox visibility
        $("#other-text").hide();
    }
});

Answer 3

您正在使用类选择器$(".option") 。 但是您尚未为其分配任何类。 除非您分配一个类，否则必须使用jquery输入名称选择器来定位该元素

$( "input[name='option']" ).change(function(){
// $(".option").change(function () {  // if using class
if (this.value === "other") {
    $("#other-text").show();
}
else{
 $("#other-text").hide();
}
});

检查这个JSFIDDLE

Answer 4

设置其他文本框不显示任何内容！ 然后单击other单选按钮时显示文本...

<input typt="text" placeholder="Specify here" id="other-text" style="display:none">

<script type="text/javascript">
    $(":radio").change(function () {
        //check if the selected option is others
        $("#other-text").hide();
        if (this.value === "other") { 
              $("#other-text").show();
        }
});
</script>