Question

guys I tried a lot for this code but nothing come up for conversion from javascript to jquery..

This code is irrelevant cuz u find this in working fiddle.. I added this chunk of code cuz stackoverflow dont allow me to post without a 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>

Check this fiddle

http://jsfiddle.net/gDxqj/

It is working well. on clicking “other” radio button the text field comes up and on clicking any other radio button it disappears.. This is the function of this script and it is working well..

Now when i tried changing it to jquery code it died.. I can show what code i made in jquery but to no help..

Fiddle for the same will help a lot..

Thanks in advance..

This is what i did

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

I put it put that in a function and invoke it in “onchange” of radiobutton but not worked

Answer 1

$(':radio').on('change', function () {
  $('#other_field')[$(this).val() === 'other' ? 'show' : 'hide']();
});

$('#other_field').on('blur', function () {
  var val = $(this).val();

  if(isNaN(val)) {
    alert('only numbers are allowed..');
  }
  else if(parseInt(val, 10) % 10 > 0) {
    alert('only multiples of 10..');
  }
});

with:

<div class="rButtons">
  <input type="radio" name="numbers" value="10" /> 10
  <input type="radio" name="numbers" value="20" /> 20
  <input type="radio" name="numbers" value="other" />other
  <input type="text" id="other_field" name="other_field" />
</div>

demo: http://jsfiddle.net/BZGsw/