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") 。しかし、あなたはそれにクラスを割り当てていません。あなたは要素最初に他のテキストボックスの表示なしを設定していない

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

をターゲットにjqueryの入力名セレクタを使用する必要がクラスを割り当てていない限り！ラジオボタン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>