使用纯Java脚本取消选中单选按钮

Question

我试图将单选按钮选中并取消选中。 我已经搜索了很长时间并找到了答案，但是当我将其应用于代码时，它将无法正常工作。 我只能检查但无法取消选中。 这是我的代码

 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

您需要访问单选按钮的.checked属性，而不是其属性。 属性确定元素的起始值，属性确定页面生命周期中的“内存中”值。

但是，您的代码（如果可行）将始终导致单选按钮处于未选中状态（这没有任何意义），因为它未经检查就开始了，因此您对其进行了检查，然后将其值设置为它的当前状态，再次回到未检查状态！

另外，您已经在嵌入式HTML事件中以及在JavaScript中再次设置了click事件代码。 根本不要使用内联HTML事件属性。 用JavaScript完成所有事件绑定。

这是一个按比例缩小的示例，显示了该概念：

 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>