.checked 总是返回 true？答案

【问题标题】：.checked always returns true?.checked 总是返回 true？
【发布时间】：2020-01-17 05:56:50
【问题描述】：

我正在使用 vanilla js，我很困惑，因为这里的代码很少，所以我不确定问题出在哪里。这可能是我对属性如何工作的误解。

function changeState() {
	const self = event.target
	const parent = event.path[1]
	
	if (self.type == "radio") {
		console.log(self.id + " is " + self.checked)
  }
}

<div id="usernames_buttons">
  <input type="radio" name="usernames" id="usernames-bl" onclick="changeState()" checked>
    <label for="usernames-bl">BL</label>
  </input>
  <input type="radio" name="usernames" id="usernames-wl" onclick="changeState()">
    <label for="usernames-wl">WL</label>
  </input>
  <button data-toggle onclick="changeState()">OFF</button>
</div>

我将所有内容都与这段代码配对并在代码笔中运行以进行测试，无论我单击哪个选项，console.log 都会返回 true。期望 usernames-bl 会返回 true，-wl 会返回 false，但无论检查的属性是否存在，它们都会返回 true。

【问题讨论】：

您在每次点击时都会调用 changeState()，我猜它是一个单选按钮，在点击时它总是会显示为“真”。
啊，不知道它在运行回调之前设置了选中的属性。我同时检查了其他元素，它看起来像我预期的那样运行，我只是没有看到 Chrome 的开发工具中的元素得到更新，所以我认为它不起作用。
另外，您是否可以将其作为答案，以便我将其标记为正确答案？
您的 HTML 无效。 input 不能有子元素，既不能有标签也不能有文本节点。另外，"message": "TypeError: event.path is undefined"。不要使用内联事件侦听器，这被认为是非常糟糕的做法。
我从我正在使用的代码中提取了代码，并试图删除所有不相关的内容。 event.path[1] 是我错过的东西，看起来像。另外，为什么使用内联事件侦听器不好？

标签： javascript html

【解决方案1】：

您在每次点击时都会调用 changeState()，我猜它是一个单选按钮，在点击时它总是会选中“true”

【讨论】：

【解决方案2】：

我认为你做得对，减去“关闭”按钮应该取消选中两者..所以我添加了这个块：

if (self.type != "radio") {
    document.getElementById("usernames-wl").checked = false;
    document.getElementById("usernames-bl").checked = false;
  }

function changeState() {
  const self = event.target
  const parent = event.path[1]

  if (self.type != "radio") {
    document.getElementById("usernames-wl").checked = false;
    document.getElementById("usernames-bl").checked = false;
  }
  
  console.log("usernames-wl is " + document.getElementById("usernames-wl").checked)  
  console.log("usernames-bl is " + document.getElementById("usernames-bl").checked)
}

<div id="usernames_buttons">
  <input type="radio" name="usernames" id="usernames-bl" onclick="changeState()" checked/>
  <label for="usernames-bl">BL</label>
  <input type="radio" name="usernames" id="usernames-wl" onclick="changeState()"/>
  <label for="usernames-wl">WL</label>
  <button data-toggle onclick="changeState()">OFF</button>
</div>

【讨论】：

HTML 无效。输入不能有子元素，既不能有标签也不能有文本节点。