.checked 总是返回 true？

Question

I'm using vanilla js, and I'm stumped because there's very little code here, so I'm not sure where the problem lies. It may be a misunderstanding on my part on how the attribute works.

 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>

I paired everything down to just this code and ran it in a code pen to test, and the console.log will return true regardless of which option I am clicking. The expectation is that usernames-bl would return true and -wl would return false, but they return true whether the checked attribute is there or not.

Answer 1

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

Answer 2

I think you are doing it right minus the "Off" button should un-check both.. so I added this block:

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>