Блог

Я знаю, что это распространенный вопрос, и я понимаю, почему он не работает. Проблема в том, что предложенные ответы не работают для меня.

HTML-код:

 <label class="radio"><img id="boyImg" class="radio-img btn-boy" src="/wp-content/uploads/2016/09/boy.png"><input type="radio" name="Gender" value="Boy"></label>
<label class="radio"><img id="girlImg" class="radio-img btn-girl" src="/wp-content/uploads/2016/09/girl.png"><input type="radio" name="Gender" value="Girl"></label>
  

У меня есть следующий код:

 $('input[type=radio]').on('change', function() {
    $(this).closest("form").submit();
});
  

Который работает, как и ожидалось, в первый раз. Проблема в том, что когда я возвращаюсь на страницу с помощью переключателя. Это работает, только если я выбираю другие переключатели — выбор одного и того же не работает. Несмотря на то, что ни один из них не выбран, при возврате на страницу. Другими словами, я не могу выбрать, например, Boy два раза подряд, несмотря на переход на другую страницу между моими выборками.

Я попробовал следующее исправление:

 $('input[type=radio]').on('change', function() {
   if($('input[value="Boy"]').is(':checked') || $('input[value="Girl"]').is(':checked')){
        $(this).closest("form").submit();
   }
});
  

Но это все равно работает, только если я выберу флажок, отличный от моего первоначального выбора.

Что я делаю не так?

В качестве обходного пути вы можете использовать click событие. Вероятно, это как-то связано с автозаполнением браузера. Попробуйте другой браузер.

Это странная особенность браузера, что выбранный переключатель сохраняется, но не отображается как выбранный. Самым простым обходным решением для ваших целей было бы добавление щелчка.

 $('input[type=radio]').on('change,click', function() {
$(this).closest("form").submit();
});