Uncheck radio button using pure Javascript

Question

I'm trying to make the radio button checked and unchecked. I have searched quite long and found answers but when I apply to my code, it doesn't work. I can only check but unable to uncheck. This is my code

function changeValue() {

  let urgent = document.querySelector("#urgent-btn");
  urgent.addEventListener('click', function() {
    if (urgent.checked) {
      urgent.setAttribute('checked', false);
      console.log(urgent.checked);
    } else {
      urgent.setAttribute('checked', true);
      console.log(urgent.checked);
    }
  })

}

<form id="my-form">
  <h2 id="form-header">Add New Task</h2>
  <button id="cancel" onclick="cancelButton(); return false;">X</button>
  <br>Name<br>
  <input type="text" id="task-name" placeholder="Task Name" required /><br>
  <div class="same-line-input">

    <div class="in-block-input-pl">
      <span id="place">Place</span><br>
      <input type="text" id="task-place" />
    </div>

    <div class="in-block-input-dep">
      <span id="department">Department</span><br>
      <select id="select">
          <option value=""></option>
          <option value="Cleanning">Cleaning</option>
          <option value="Kitchen">Kitchen</option>
          <option value="Receptionist">Receptionist</option>
          <option value="Beltboy">Bellboy</option>
          <option value="All">All</option>
      </select>
    </div>

  </div>
  <div class="descp-form">
    Description<br>
    <textarea rows="10" cols="50" id="description"></textarea>
  </div>
  <div class="urgent-form">
    <input type="radio" name="urgent" value="" id="urgent-btn" onchange="changeValue ();return false;" /> Urgent
  </div>
  <div class="attachment-form">
    Attachment:<br><input type="file" name="fileToUpload" id="fileToUpload" accept=".jpg, .png, .jpeg" onchange="previewFile()" ;/>
    <img id="output" src="#" alt="Image preview" height=70 width=60>
  </div><br>
  <input type="submit" id="form-submit" onclick="addTask (); return false;" />
</form>

You'll want to use <input type="checkbox"> instead. A radio button is the wrong choice here. — user5734311
– user5734311, Commented Feb 23, 2018 at 23:12

Scott Marcus · Accepted Answer · 2018-02-23 23:18:56Z

2

You need to access the .checked property of the radio button, not its attribute. The attribute determines the starting value of the element, the property determines the "in-memory" value as the page goes through its lifecycle.

But, your code (if it worked) would always cause the radio button to wind up uncheked (which doesn't make a lot of sense) because it starts off unchecked, so you check it, which then sets its value to the opposite of its current state, which is back to unchecked again!

Also, you've got click event code set in an inline HTML event and again in JavaScript. Don't use inline HTML event attributes at all. Do all your event binding in JavaScript.

Here's a scaled down example that shows the concept:

let urgent = document.getElementById("urgent-btn");
let tb = document.querySelector("#toggleButton");
tb.addEventListener('click', function(){
  // Just set checked to the opposite of what it is now
  urgent.checked = !urgent.checked; 
  console.log(urgent.checked);
});

<form id="my-form">
  <input type="radio" name="urgent" value="" id="urgent-btn"> Urgent
  <input type="button" id="toggleButton" value="Toggle Radio Button">
</form>

edited Feb 23, 2018 at 23:18

answered Feb 23, 2018 at 23:17

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sy Quoc Over a year ago

I use onclick attr instead of onchange attr and it works to check and uncheck. But the new problem is console.log(urgent.checked) show only true doesn't matter the button checked or unchecked

Scott Marcus Over a year ago

@SyQuoc That's because you are setting the attribute and logging the property. They are not the same thing. Read my answer and just use the .checked property.

Scott Marcus Over a year ago

@SyQuoc It really sounds like you should be using a checkbox and not a radio button.

Collectives™ on Stack Overflow

Uncheck radio button using pure Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related