Почему не работает переключение radiobutton?

Question

[JefAir]

Есть 2 пары radiobutton. Мне нужно сделать так, чтобы в зависимости от выбора в первой паре, автоматически осуществлялся выбор и во второй паре (такая же зависимость должна быть и при выборе второй пары).

Проблема:
Данный скрипт работает, но только один раз. Если переключить кнопки "Один" и "Два" больше двух раз, то переключения перестают работать.

<fgroup class="fg1">
     <label for="input1">
         <input id="input1" type="radio" name="input_gr1" value="1">Один
     </label>
     <label for="input2">
         <input id="input2" type="radio" name="input_gr1" value="2">Два
     </label>
 </fgroup>
 <fgroup class="fg2">
     <label for="input3">
         <input id="input3" type="radio" name="input_gr2" value="1">Три
     </label>
     <label for="input4">
         <input id="input4" type="radio" name="input_gr2" value="2">Четыре
     </label>
 </fgroup>

$('input').on('input change', function(){
        var q1 = $('input[name=input_gr1]:checked').val();
        var q2 = $('input[name=input_gr2]:checked').val();

    	  if (q1 == '1') {
            $('#input4').attr('checked', true);

        } else if (q1 == '2') {
            $('#input3').attr('checked', true);
        }

    });

Для наглядности:
https://jsfiddle.net/mnruvcaj/1/

Вопрос:
В чем проблема и как это исправить? Может быть нужен какой-то другой подход?

Answer 1

[0xD34F]

Групп радиокнопок две, а состояние смотрите только у одной.

$('#input4').attr('checked', true);

Атрибут checked предназначен для задания дефолтного состояния радиокнопки, вместо него следует использовать одноимённое свойство.

<fgroup class="fg1">

Это что ещё за на хрен? Меняйте на div'ы с общим классом - <div class="fgroup">.

Вместо того, чтобы смотреть состояния конкретных радиокнопок, ищите кнопку вне текущей группы, значение которой не совпадает с только что выбранным:

const $groups = $('.fgroup').on('change', function(e) {
  $groups
    .not(this)
    .find(`input[value!="${e.target.value}"]`)
    .prop('checked', true);
});

Answer 2

[Евгений]

вместо attr используйте prop