如何在选择单选按钮时清除文本字段中的文本
How to clear text inside text field when radio button is select
目前我有这个单选按钮
- 电子学
- 计算机
- 别人
我正在尝试做的是,如果选择了单选按钮Others
,我想显示一个输入文本字段并让用户键入。
我想做的是,当我选择Others
并在输入字段中键入内容时,然后当我选择返回Eletronics
或Computers
时,我想清除我在输入字段中编写的文本。
请为我提供JavaScript或jQuery的解决方案。
这是我的代码示例。请检查一下:http://jsfiddle.net/dnGKM/
更新
$('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('');
}
});
演示
你可以使用这个:
document.getElementById("others_text").value='';
以清除输入字段。
请在您的代码中添加以下代码:
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);
这将对您有所帮助。
尝试使用此解决方案:
$(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/
您将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('');
}
});
});
===
============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
====
=============j查询 $('input[name=rdo]').change(function() {
var a = $(this).val();
if (a != 3) {
$('#textboxid').hide();
}else{
$('#textboxid').val('');
$('#textboxid').show();
}
});
$("#<%=text1.ClientID%>").val('');
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 使用jquery将输入字段转换为文本
- 如何从查询字符串中的输入字段发回文本
- 表单输入字段随着溢出的文本而增长
- 使用单个文本框向多个字段添加严格搜索
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 使用jQuery的输入字段文本换行
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 如何根据文本长度立即显示和隐藏字段?-JQuery
- 如何使文本、数字和日期html输入字段以一致的方式支持Ctrl+Z(撤消)
- 模拟文本输入字段上的退格键
- 输入字段中的可持续文本
- 未获取文本输入字段的值
- 没有文本安全性的密码字段
- 将禁用的输出字段更改为带前缀的文本
- 为什么 react 将输入[类型=“文本”] 字段设为只读,除非我提供 onChange 回调
- 使用SAPUI5中的“文本”字段显示正确的“日期”
- Kendo,如何将MVVM文本:字段绑定到远程DataSource