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> 

Answer 1

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>