如何清除文本的文本字段中时，单选按钮选择

问题描述：

目前我有这个单选按钮如何清除文本的文本字段中时，单选按钮选择

普电子
计算机
其他

我所试图做的是，如果选中单选按钮Others，我想显示一个输入文本字段并让用户输入。

我想要做的是，当我选择Others并键入输入字段里面的东西，然后当我选择回Eletronics或Computers，我想清楚了，我输入栏里面写的文字。

请给我提供JavaScript或jQuery的解决方案。

这是我的代码示例。敬请检查：http://jsfiddle.net/dnGKM/

答

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

当我通过POST提交结果时，总是空白:(..任何想法为什么？如果我删除的是查找（'输入：文本'）。val（''）的js代码，数据提交正确，不是空白的数据了。解决方法？ – spotlightsnap 2012-04-25 05:20:55

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

谢谢，它现在的作品：D – spotlightsnap 2012-04-25 07:19:14

答

您可以使用此：

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

这将是对你有帮助。

问题，当我用POST提交表单时，我只能得到空白值。我选择“其他”，但文本框内有输入文本。 :(有没有其他的方法可以清除文本？ – spotlightsnap 2012-04-25 04:52:31

答

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

我得到了一个错误：你不能改变“type”属性 – Chinmaya003 2012-04-24 10:28:16

对不起，我的错，我不知道那是被禁止的，刚编辑我的答案，我做了一个更常见的方式:) – sp00m 2012-04-24 11:27:13

当我通过POST提交结果时，其他文本框的结果总是空白:(..任何想法为什么？如果我删除这是这样的js代码（$（'＃others-文本'）。val（''）;），数据被正确提交，而不是空白数据。解决方案的任何方式？ – spotlightsnap 2012-04-25 04:57:37

答

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

答

尝试使用此解决方案：

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

问题是，当我提交与POST表单，我只得到空白值。我选择“其他”，但文本框内有输入文本。 :(。有没有其他的方式来清除文本？ – spotlightsnap 2012-04-25 04:53:00

我已经更新JSFiddle.See这个链接，如果它可以帮助你： http://jsfiddle.net/dnGKM/5/ – Chinmaya003 2012-04-25 05:37:38

答

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

它看起来简单和容易.. – 2013-07-02 06:18:03

如何清除文本的文本字段中时，单选按钮选择

相关推荐