Изменить переключатель с помощью выбора

Question

Я нашел сообщение, показывающее, как изменить радио-кнопку, на которую нажали, но мне было интересно, как изменить радио-кнопку в зависимости от выпадающего списка. В частности, когда значение select = "yes", установите выбранный переключатель на yes.

<select id='yes_no'>
  <option value='yes'>Yes</option>
  <option value='no'>No</option>
</select>

<form>
  <input type="radio" name="category" value="yes" /> Yes
  <input type="radio" name="category" value="no" checked /> No
</form>

Я пытался использовать ответы типа Установить для выбранной радиостанции из группы радиостанций значение , но это все равно не работает.

$('#yes_no').change(function(){
   $("input[name='category'][value=" + $(this).val()  + "]").prop('checked', true);
});

Есть ли отведения?

Answer 1

При загрузке страницы событие изменения не срабатывает (автоматически). Поскольку радиостанция с value="no" имеет атрибут checked, по умолчанию установлено значение флажка.

Чтобы получить правильное значение, установленное при загрузке страницы, вы можете установить для атрибута checked значение value="yes". радио (и удалите checked из value="no" радио)

ИЛИ: Инициируйте событие ( изменение ) следующим образом:

$('#yes_no').change(function(){
   $("input[name='category'][value=" + $(this).val()  + "]").prop('checked', true);
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='yes_no'>
  <option value='yes'>Yes</option>
  <option value='no'>No</option>
</select>

<form>
  <input type="radio" name="category" value="yes" /> Yes
  <input type="radio" name="category" value="no" checked /> No
</form>

Answer 2

Вы можете установить начальное проверенное значение как Yes.

На самом деле это работает. В момент смены выберите. No значение радио уже проверено. Поэтому оно не отражено в интерфейсе пользователя

$('#yes_no').change(function() {
  $("input[name='category'][value="+$(this).val()+"]").prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='yes_no'>
  <option value='yes'>Yes</option>
  <option value='no'>No</option>
</select>

<form>
  <input type="radio" name="category" value="yes" checked/> Yes
  <input type="radio" name="category" value="no" /> No
</form>