2012-04-24 68 views
2

目前我有這個單選按鈕如何清除文本的文本字段中時,單選按鈕選擇

  1. 普電子
  2. 計算機
  3. 其他

我所試圖做的是,如果選中單選按鈕Others,我想顯示一個輸入文本字段並讓用戶輸入。

我想要做的是,當我選擇Others並鍵入輸入字段裏面的東西,然後當我選擇回EletronicsComputers,我想清楚了,我輸入欄裏面寫的文字。

請給我提供JavaScript或jQuery的解決方案。

這是我的代碼示例。敬請檢查:http://jsfiddle.net/dnGKM/

回答

3

UPDATE

$('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(''); 
    } 
});​ 

DEMO

+0

當我通過POST提交結果時,總是空白:(..任何想法爲什麼?如果我刪除的是查找('輸入:文本')。val('')的js代碼,數據提交正確,不是空白的數據了。解決方法? – spotlightsnap 2012-04-25 05:20:55

+0

@spotlightsnap檢查更新演示 – thecodeparadox 2012-04-25 05:40:23

+0

謝謝,它現在的作品:D – spotlightsnap 2012-04-25 07:19:14

1

您可以使用此:

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

清除輸入字段。

1

請在下面添加一行代碼代碼:

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);​ 

這將是對你有幫助。

+0

問題,當我用POST提交表單時,我只能得到空白值。我選擇「其他」,但文本框內有輸入文本。 :(有沒有其他的方法可以清除文本? – spotlightsnap 2012-04-25 04:52:31

1

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(''); 
     } 
    }); 
}); 
+0

我得到了一個錯誤:你不能改變「type」屬性 – Chinmaya003 2012-04-24 10:28:16

+0

對不起,我的錯,我不知道那是被禁止的,剛編輯我的答案,我做了一個更常見的方式:) – sp00m 2012-04-24 11:27:13

+0

當我通過POST提交結果時,其他文本框的結果總是空白:(..任何想法爲什麼?如果我刪除這是這樣的js代碼($('#others-文本')。val('');),數據被正確提交,而不是空白數據。解決方案的任何方式? – spotlightsnap 2012-04-25 04:57:37

1

嘗試使用此解決方案:

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

+0

問題是,當我提交與POST表單,我只得到空白值。我選擇「其他」,但文本框內有輸入文本。 :(。有沒有其他的方式來清除文本? – spotlightsnap 2012-04-25 04:53:00

+0

我已經更新JSFiddle.See這個鏈接,如果它可以幫助你: http://jsfiddle.net/dnGKM/5/ – Chinmaya003 2012-04-25 05:37:38

1

=============== 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(); 
     } 
    }); 
+0

它看起來簡單和容易.. – 2013-07-02 06:18:03

相關問題