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

请试试这个：

＆＃13;

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

＆＃13;

#other-text{
  display:none;
}

＆＃13;

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

＆＃13;

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>

Javascript功能单选按钮其他选项

4 个答案: