[英]How to clear text inside text field when radio button is select
Currently I have this radio buttons 目前我有这个单选按钮
What I am trying to do is, if radio button Others
is selected, I would like to display an input text field and let the user type. 我想要做的是,如果选中单选按钮
Others
,我想显示一个输入文本字段,让用户输入。
What I would like to do is, when I select Others
and type something inside the input field, then when I choose back to Eletronics
or Computers
, I would like to clear the text that I wrote inside input field. 我想做的是,当我选择
Others
并在输入字段中输入内容时,当我选择回Eletronics
或Computers
,我想清除我在输入字段中写的文本。
Please kindly provide me with the solution of JavaScript or jQuery. 请为我提供JavaScript或jQuery的解决方案。
Here is my code sample. 这是我的代码示例。 Please kindly check it: http://jsfiddle.net/dnGKM/
请检查一下: http : //jsfiddle.net/dnGKM/
You can use this: 你可以用这个:
document.getElementById("others_text").value='';
to clear the input field. 清除输入字段。
Please add below code of line in your code: 请在您的代码中添加以下代码行:
document.getElementById("others_text").value = '';
now its look like: 现在看起来像:
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);
This would be helpful for you. 这对你有帮助。
You add the jQuery
tag to your question, so that should do the trick using jQuery :) 你将
jQuery
标记添加到你的问题,所以这应该使用jQuery :)
CSS: CSS:
.hidden {
display: none;
}
HTML: 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: JS:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').removeClass('hidden');
} else {
$('#others-text').addClass('hidden');
$('#others-text').val('');
}
});
});
Try with this Solution: 试试这个解决方案:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').show();
} else {
$('#others-text').hide();
$('#others-text').val('');
}
});
})
Here there is a JSFiddle link: 这里有一个JSFiddle链接:
===============HTML =============== 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 ===============的jQuery
$('input[name=rdo]').change(function() {
var a = $(this).val();
if (a != 3) {
$('#textboxid').hide();
}else{
$('#textboxid').val('');
$('#textboxid').show();
}
});
$("#<%=text1.ClientID%>").val('');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.