How to change radio button checked attribute

Question

what I am trying to do is to write a function that selects a radio button, here is a codepen:

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

- the problem is that the `attr()` function doesn't work after pressing the radio button manually.
- after searching online I found that the attr() function works only to set initial values and that it can't be used after the user interacts with the element. so I tried the native `setAttribute()` but it didn't work either. then I found that I could use the jquery `val()` function, but I don't want to change the value of the radio button input, I want to change the `checked` attribute.
**my question is:**
how to change the checked attribute of radio button input without `attr()` function?

Does this answer your question? [How can I check if a checkbox is checked?](https://stackoverflow.com/questions/9887360/how-can-i-check-if-a-checkbox-is-checked) — Greedo, Jul 21 '20 at 14:14
@xKobalt yes actully, thank you. please copy this to an answer — White Death, Jul 21 '20 at 14:29

score 2 · Accepted Answer · answered Jul 21 '20 at 15:14

As requested in the comments, here's my solution:

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>

score 1 · Answer 2 · answered Jul 21 '20 at 14:28

1

When you check a radio button by setting the .checked attribute to true it set every other radio button with the same name attribute to unchecked

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>

answered Jul 21 '20 at 14:28

jonatjano

3,576
1
15
20

1

that is the native js method, @xkobalt suggested using `prop()` which is the jquery alternative – White Death Jul 21 '20 at 14:55
@WhiteDeath I'll be frank, I never used jQuery, and think it is unnecessary with the evolution of native JS, so I don't know which is better. Also you used native JS in the question `document.getElementById('s2').setAttribute('checked', true)` that's why I considered it allowed – jonatjano Jul 22 '20 at 15:29
1

I am sorry for you, but @xKobalt comment came first + this is the solution I ended up using . however, I appreciate your help – White Death Jul 25 '20 at 22:01

How to change radio button checked attribute

2 Answers2