javascript - ラジオボタンが選択されているときにテキストフィールド内のテキストをクリアする方法

Question

現在、私はこのラジオボタンを持っています

1. 電子工学
2. コンピュータ
3. その他

私がやろうとしているのは、ラジオボタンOthersが選択されている場合、入力テキストフィールドを表示してユーザーに入力させたいということです。

私がやりたいのは、入力フィールド内で何かを選択して入力したときに、またはにOthers戻ることを選択したときに、入力フィールド内に書いたテキストをクリアしたいということです。EletronicsComputers

JavaScriptまたはjQueryの解決策を教えてください。

これが私のコードサンプルです。親切にチェックしてください：http://jsfiddle.net/dnGKM/

Answer 1

アップデート

$('input:radio').on('click', function() {
    if($(this).attr('id') == 'others') {
        $('#showhide').css('opacity', 1.0);
   } else {
       $('#showhide').css('opacity', 0).find('input:text#others_text').val('');
    }  
});​

デモ

Answer 2

これを使用できます：

document.getElementById("others_text").value='';

入力フィールドをクリアします。

Answer 3

質問にタグを追加するjQueryので、jQueryを使用してトリックを行う必要があります:)

CSS:

.hidden {
    display: none;
}

HTML:

<label for="electronics">Electronics</label>
<input type="radio" id="electronics" name="rdbutton" />
<label for="computers">Computers</label>
<input type="radio" id="computers" name="rdbutton" />
<label for="others">Others</label>
<input type="radio" id="others" name="rdbutton" />
<input type="text" id="others-text" name="others-text" class="hidden" />

JS:

$(function() {
    $('input[type="radio"]').click(function() {
        if($(this).attr('id') == 'others') {
            $('#others-text').removeClass('hidden');
        } else {
            $('#others-text').addClass('hidden');
            $('#others-text').val('');
        }
    });
});

Answer 4

このソリューションを試してください：

$(function() {
      $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'others') {
           $('#others-text').show();
       } else {
           $('#others-text').hide();
           $('#others-text').val('');
       }
   });
})

ここに JSFiddle リンクがあります。

http://jsfiddle.net/dnGKM/4/

Answer 5

コードに以下の行のコードを追加してください。

document.getElementById("others_text").value = '';

今は次のようになります。

document.getElementById("others").addEventListener("click", function()
{
    document.getElementById("others_text").value = '';
    document.getElementById("showhide").style.opacity = 1;
}, false);
document.getElementById("computers").addEventListener("click", function()
{
    document.getElementById("showhide").style.opacity = 0;
}, false);
document.getElementById("electronics").addEventListener("click", function()
{
    document.getElementById("showhide").style.opacity = 0;
}, false);​

これは役に立ちます。

Answer 6

===============HTML

<input type="radio" name="rdo" value="1" checked="checked" />Electronics
<input type="radio" name="rdo" value="2" />Computers
<input type="radio" name="rdo" value="3" />Others

===============jQuery

  $('input[name=rdo]').change(function() {
         var a = $(this).val();
         if (a != 3) {
             $('#textboxid').hide();
         }else{
             $('#textboxid').val('');
             $('#textboxid').show();
         }
   });

Answer 7

$("#<%=text1.ClientID%>").val('');