Javascript 单选按钮不会打印值

Question

我有一个单选按钮 selection，我想打印 selected 值。这是我的代码：

function submit() {
  let Q1 = document.querySelector('input[name="question1Selection"]:checked').value;
  console.log(Q1)
}

<div id="QUESTION1" class="questionContainer">
  <h1 class="questionNumTitle">Question 1</h1>
  <h3 class="questionQuery">How old are you?</h3>

  <div class="questionSelection">
    <div class="selectionContainer">
      <input type="radio" id="ageQ1" name="question1Selection">
      <label for="ageQ1">0-18 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ2" name="question1Selection">
      <label for="ageQ2">19-40 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ3" name="question1Selection">
      <label for="ageQ3">41-64 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ4" name="question1Selection">
      <label for="ageQ4">65+ years old</label>
    </div>
  </div>
</div><br><br>

<input type="submit" onclick="submit()" value="Submit"/>

然而，当您 select 一个值并按“提交”时，控制台神秘地只打印“on”。这里发生了什么？为什么它不打印值？

感谢您的帮助。

Answer 1

您的值存储在标签内而不是单选按钮内。

input没有默认值on

您可以尝试获取选中项目的索引和 return 标签值。

使用+获取输入按钮label的兄弟

function submit(){ document.querySelectorAll('input[name="question1Selection"]').forEach((i,index)=>{
if(i.checked) console.log(document.querySelectorAll('input[name="question1Selection"] + label')[index].textContent)
});
}

<div id="QUESTION1" class="questionContainer">
  <h1 class="questionNumTitle">Question 1</h1>
  <h3 class="questionQuery">How old are you?</h3>

  <div class="questionSelection">
    <div class="selectionContainer">
      <input type="radio" id="ageQ1" name="question1Selection">
      <label for="ageQ1">0-18 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ2" name="question1Selection">
      <label for="ageQ2">19-40 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ3" name="question1Selection">
      <label for="ageQ3">41-64 years old</label><br>
    </div>
    <div class="selectionContainer">
      <input type="radio" id="ageQ4" name="question1Selection">
      <label for="ageQ4">65+ years old</label>
    </div>
  </div>
</div><br><br>

<input type="submit" onclick="submit()" value="Submit"/>

Javascript 单选按钮不会打印值

Javascript Radio Button Won't Print Value

html

javascript

radio-button