Question

tis my code

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

this is css code

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

this is 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>

All is well..
but the problem is this.. when i click “other” radio button it opens up a new blank field, but when i click back to 10 or 20 it stays there.. How can i make this disappear??

I know answer is easy.. But i tried many things but not working..

Thanks

Answer 1

you can do this with JQuery its more simples like this

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

</script>