javascript - 使用 select 更改单选按钮

Question

我发现一篇文章显示了如何更改单击的单选按钮，但我想知道如何根据选择下拉列表更改单选按钮。具体来说，当选择值="is"时，将所选单选按钮更改为"is"。

<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>

我尝试过使用类似 Set selected radio from radio group with a value 的答案但这仍然行不通。

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

有线索吗？

Answer 1

页面加载时，更改事件不会触发(自动)。由于value="no" 的单选按钮具有checked 属性，因此默认设置为checked。

要在页面加载时设置正确的值，您可以将 checked 属性设置为 value="yes" 单选(并删除 checked 来自 value="no" radio )

或:按以下方式触发事件(更改):

$('#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>