Переключатель проверки текстового поля jQuery focus

Question

Я занят с небольшой формой, но я застрял сейчас.

У меня есть этот маленький код:

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);
    }
 }); 

Это рабочая половина. Когда я набираю что-то во входном тексте, радиокнопка будет проверена, но если я передумаю и проверю какую-нибудь другую радиокнопку, проверка не удаляется в коде HTML.

И когда я набираю значение, передумал, проверил другую радиокнопку и вернулся к введенному тексту, тогда радиокнопка не изменится автоматически.

Так что я не прав?

Answer 1

Вы должны использовать .focus а также .blur вместо .click

Вы также должны использовать .prop установить радио 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" />