CODEWITHSUNDEEP
jqueryinputradio-buttonfocuschecked
Maanstraat
Maanstraat

Reputation: 1251

jQuery focus textfield check radio button

I am busy with a little form but i am stuck now.

I have this little code:

jQuery('#textinput input').click(function() {
    if (jQuery(this).is(':focus')) {
        jQuery('input:radio[name=open_amount]').attr('checked',true);
    } else { 
        jQuery('input:radio[name=open_amount]').attr('checked',false);
    }
 });

This is working half. When i type something in the input text the radiobutton will be checked but if i change my mind and i check some other radiobutton the check is not removed in the HTML code.

And when i type in a value, change my mind and check a other radio button and go back to the input text the radio button won't change automatically then.

So what do i wrong?

Upvotes: 1

Views: 8468

Answers (1)

Eddie
Eddie

Reputation: 26844

You have to use .focus and .blur instead of .click

You also have to use .prop to set the radio btn

jQuery(function() {

  jQuery('#textinput input').focus(function() {
    jQuery('input:radio[name=open_amount]').prop('checked', true);
  });

  jQuery('#textinput input').blur(function() {
    jQuery('input:radio[name=open_amount]').prop('checked', false);
  });

  //Suggestion: You can add this so that when user clicks on the radio btn, it will fucos on the textbox
  jQuery('input:radio[name=open_amount]').click(function(){
    jQuery('#textinput input').focus();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="textinput">
  <input type="text">
</div>

<input type="radio" name="open_amount" />

Upvotes: 3

Related Questions