如何更改单选按钮选中的属性

Question

我想做的是编写一个选择单选按钮的函数，这是一个代码笔：

function select(valueOfRadio) {
    $('#s1').removeAttr('checked')
    $('#s2').removeAttr('checked')
    $('#s3').removeAttr('checked')
    switch (valueOfRadio) {// if it equals 
        case 2:
            document.getElementById('s2').setAttribute('checked', true)
            break;
        case 3:
            document.getElementById('s3').setAttribute('checked', true)
            break;
        default:
            document.getElementById('s1').setAttribute('checked', true)
    }
}

- 问题是 `attr()` 函数在手动按下单选按钮后不起作用。
- 在网上搜索后，我发现 attr() 函数仅用于设置初始值，并且在用户与元素交互后无法使用。所以我尝试了原生的 `setAttribute()` 但它也没有用。然后我发现我可以使用 jquery `val()` 函数，但是我不想更改单选按钮输入的值，我想更改 `checked` 属性。
**我的问题是：**
如何在没有 `attr()` 函数的情况下更改单选按钮输入的选中属性？

Answer 1

当您通过将 .checked 属性设置为 true 来选中单选按钮时，它会将具有相同 name 属性的所有其他单选按钮设置为未选中

function select(value) {
  document.getElementById(`s${value}`).checked = true
}
let i = 1
setInterval(
  () => {select(i++ % 3 + 1)},
  1000
)

<input type="radio" id="s1" name="test" checked>1</input>
<input type="radio" id="s2" name="test">2</input>
<input type="radio" id="s3" name="test">3</input>

Answer 2

根据评论中的要求，这是我的解决方案：

function select(valueOfRadio){
  $('#s1').prop('checked')
  $('#s2').prop('checked')
  $('#s3').prop('checked')
  switch(valueOfRadio){ // if it equals 
    case 2 :
      $('#s2').prop('checked', true);
      break;
    case 3 :
      $('#s3').prop('checked', true);
      break;
    default:
      $('#s1').prop('checked', true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table>
    <tr id="defaultSize">
      <th><input type="radio" name="size" value="1" id="s1"/></th>
      <th><input type="radio" name="size" value="2" id="s2"/></th>
      <th><input type="radio" name="size" value="3" id="s3"/></th>
    </tr>
  </table>

如何更改单选按钮选中的属性

How to change radio button checked attribute

html

javascript

jquery

radio-button