单击关闭按钮时，取消选中单选按钮

Question

I'm currently have a modal with some radio buttons (".modal-options"), and a close modal button. Im trying to make it so when the close button is clicked, all the clicked radio buttons become unchecked. current code is below. Console is saying that removeAttr is not a function...? thanks

  <p class='information'> Cancel Appointment? </p> <div class="modal-flex"> <%= f.radio_button :delete_appointment, :true %> <%= f.label :delete_appointment_true, "Yes", class: "modal-options cancel" %> <%= f.radio_button :delete_appointment, :false %> <%= f.label :delete_appointment_false, "No", class: "modal-options cancel" %> </div> 

  <p class="close"> <%= t(".close") %> </p> 

 var close = document.querySelector(".close"); var buttons = document.querySelectorAll(".modal-options"); close.addEventListener("click", (event) => { buttons.forEach(function(button) { button.removeAttr('checked'); }); }) 

Answer 1

Firstly, removeAttr isn't a function on HTML Elements; you meant removeAttribute ( mdn ).

Secondly, for unchecking an input, you'd want input.checked = false instead. The reason removeAttribute doesn't work is because if you inspect the input element, you will see that no 'checked' attribute is being added or removed when toggling. 'Checked' is a property, not an attribute; the distinction is important in this case and when getting into custom elements.

  document.querySelector('button').addEventListener('click', () => { document.querySelector('input').checked = false; }); 

 <input type="checkbox"> <button>uncheck</button> 

Answer 2

.removeAttr() is jQuery method. The equivalent JavaScript method is remove​Attribute()

Though, I prefer using the checked property:

button.checked = false;

You are targeting the label, instead you should target the radio button:

var buttons = document.querySelectorAll(".modal-flex input[type=radio]");