1

这是我的代码

<div class="rButtons">
<input type="radio" name="numbers" value="10" onclick="uncheck();" />10
<input type="radio" name="numbers" value="20"  onclick="uncheck();" />20
<input type="radio" name="numbers" value="other" onclick="check(this);"/>other
<input type="text" id="other_field" name="other_field" onblur="checktext(this);"/>
</div>

这是CSS代码

<style type="text/css">
#other_field
{
visibility: hidden;
}
</style>

这是js

<script type="text/javascript">
function uncheck()
 {
   document.getElementById('other_field').style.visibility = "hidden";
 }
function check(inputField)
{
    if(inputField.checked)
    {
        document.getElementById('other_field').style.visibility = "visible";
    }
}
function checktext(inputField)
{
    if(isNaN(inputField.value))
    {
        alert('only numbers are allowed..');
        return false;
    }
    else if( (inputField.value % 10 ) != 0)
    {
        alert('only multiples of 10..');
        return false;
    }
    else
    {
        return true;
    }

}
</script>

一切都很好.. 但问题是这个.. 当我点击“其他”单选按钮时，它会打开一个新的空白字段，但是当我点击回到 10 或 20 时它会停留在那里.. 我怎样才能让它消失？

我知道答案很简单..但我尝试了很多东西但没有工作..

谢谢

4

2 回答 2

0

完整的代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script>

<script type="text/javascript">

    function ShowTextBox()
    {
        if ($("input[name=radiobutton1]:checked").val() == "show")      
        {       
           $("#text_box_to_show").show();
        }     
        else
        {
           $("#text_box_to_show").hide();
        }   
    }

</script>
</head>

<body>
<h3>Example</h3>
  <input name="radiobutton1" type="radio" value="show" onChange="ShowTextBox();">Show
  <input name="radiobutton1" type="radio" value="hide" checked onChange="ShowTextBox();">Hide
  <input type="text" id="text_box_to_show" name="textfield" style="display:none;">
</body>
</html>
于 2013-01-23T21:10:57.643 回答
0

你可以用 JQuery 做到这一点，它更简单，像这样

<script>
 var $radios = $('input:radio[name=numbers]');
        if ($radios.is(':checked') === true) {
           $("#other_field").show();
        }     
        else
        {
           $("#other_field").hide();
        }   

</script>
于 2013-01-23T14:41:29.400 回答