Question

我试图选中并取消选中单选按钮。我已经搜索了很长时间并找到了答案但是当我申请代码时，它并没有起作用。我只能检查但无法取消选中。这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要访问单选按钮的.checked属性，而不是其属性。该属性确定元素的起始值，该属性确定＆＃34; in-memory＆＃34;页面经历其生命周期的价值。

但是，你的代码（如果有效）总是会导致单选按钮结束（这没有多大意义），因为它从未选中开始，所以你检查它，然后设置它价值与其当前状态相反，再次未经检查！

此外，您还在内联HTML事件中设置了点击事件代码，并再次在JavaScript中设置了点击事件代码。根本不使用内联HTML事件属性。用JavaScript完成所有事件绑定。

这是一个展示概念的缩小示例：

＆＃13;

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

＆＃13;

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

＆＃13;

使用纯Javascript取消选中单选按钮

1 个答案: