2

目前我有这个单选按钮

  1. 电子学
  2. 电脑
  3. 其他

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

我想做的是，当我Others在输入字段中选择并输入内容时，当我选择返回Eletronics或时Computers，我想清除我在输入字段中写的文本。

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

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

4

7 回答 7

3

更新

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

演示

于 2012-04-24T10:26:07.540 回答
1

你可以使用这个：

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

清除输入字段。

于 2012-04-24T09:45:42.050 回答
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);​

这对你会有帮助。

于 2012-04-24T09:47:16.120 回答
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('');
        }
    });
});
于 2012-04-24T09:52:36.510 回答
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/

于 2012-04-24T10:29:47.097 回答
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();
         }
   });
于 2012-12-27T06:17:10.213 回答
0 
$("#<%=text1.ClientID%>").val('');
于 2012-04-24T09:54:11.237 回答