从单选按钮获取值 - "input[name='gender']:checked" returns null

Question

我正在尝试获取无线电输入的值，但由于某种原因 returns 为空。这是代码：

HTML

<form id="myForm">   
  <input name="gender" type="radio" value="male" />
  <label for="male">Male</label>
  <input name="gender" type="radio" value="female" />
  <label for="female">Female</label>
</form>

JS

const form = document.getElementById("myForm");
const selectedGender = document.querySelector("input[name='gender']:checked");


form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log(selectedGender);
});

为什么我在控制台中得到 null？

Answer 1

您是运行 querySelector，甚至在选择事件发生之前。您只是在提交事件中控制台记录它。

您需要做的就是在 eventListener 中发送 selectedGender。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const selectedGender = document.querySelector("input[name='gender']:checked");
  console.log(selectedGender);
});

Answer 2

在 dom 准备好之前，您确实制作了 select。

您可以在 evenlistener 函数中或至少在 ready 函数中执行此操作。

(function() {
const selectedGender = document.querySelector("input[name='gender']:checked");
console.log(selectedGender);
})();

或者创建一个函数来调用它。

bigLogic = () => {

 //A lot of logic

 const selectedGender = document.querySelector("input[name='gender']:checked");
 console.log(selectedGender);
 //More logic
}


form.addEventListener("submit", (e) => {
  e.preventDefault();
  bigLogic();
});

从单选按钮获取值 - "input[name='gender']:checked" returns null

Get value from radio button - "input[name='gender']:checked" returns null

html

javascript

null

radio-button