如何在JS的querySelector中选中含input的label及保存图片单选值

问题1：在JavaScript的querySelector()中选择包含input元素的label元素 #

如果你想选中所有包含input子元素的label，现在主流浏览器都支持has()伪类，这是最直接的方法：

// 选择所有包含任意input的label
const labelsWithInput = document.querySelectorAll('label:has(input)');

// 如果要更精准，比如只选包含单选框input的label
const labelsWithRadio = document.querySelectorAll('label:has(input[type="radio"])');

has()伪类的作用就是匹配包含指定后代元素的父元素，完美适配你的需求。如果需要兼容旧浏览器（比如IE），可以退而求其次，先选中所有input，再通过closest('label')向上查找最近的label父节点：

// 兼容旧浏览器的写法
const inputs = document.querySelectorAll('input');
const labelsWithInput = Array.from(inputs)
  .map(input => input.closest('label'))
  .filter(Boolean); // 过滤掉找不到label的input

问题2：纯图片单选选项的选中状态与值保存 #

看了你提供的部分HTML，我猜你是想把单选按钮隐藏，只用图片作为交互选项对吧？别担心，我们可以通过隐藏单选按钮+关联label图片的方式，既保留单选框的原生逻辑，又实现纯图片的交互，同时轻松保存选中值。

第一步：修正HTML结构 #

首先要确保每个input都有唯一的id，并且label的for属性和对应input的id匹配（你的代码里input没写id，label的for是"p"，这会导致点击图片无法触发单选）。然后把input隐藏，在label里放图片：

<div id="simplequiz">
  <h3>What's your favourite colour palette?</h3>
  <p>
    <!-- 隐藏单选按钮，但保留name、value、id核心属性 -->
    <input type="radio" name="colour" class="a" value="-1" id="colour-opt-1" hidden />
    <!-- label的for和input的id对应，点击图片就会选中单选 -->
    <label for="colour-opt-1">
      <img src="palette1.jpg" alt="Warm earth tones" class="quiz-img" />
    </label>
  </p>
  <p>
    <input type="radio" name="colour" class="a" value="2" id="colour-opt-2" hidden />
    <label for="colour-opt-2">
      <img src="palette2.jpg" alt="Bright neons" class="quiz-img" />
    </label>
  </p>
  <!-- 更多问题选项... -->
  <button id="get-result">Calculate My Personality</button>
</div>

第二步：用JS保存选中值并添加交互反馈 #

我们可以监听单选按钮的change事件，实时记录每个问题的选中值，同时给选中的图片加高亮样式，让用户清楚自己选了什么：

// 用对象存储每个问题的选中值，key是单选框的name（对应问题），value是选项值
const quizAnswers = {};

// 给所有单选按钮绑定change事件
document.querySelectorAll('#simplequiz input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 记录当前问题的选中值
    const questionKey = this.name;
    quizAnswers[questionKey] = parseInt(this.value);
    
    // 给选中的图片添加高亮，先移除同组其他图片的高亮
    const allImgsInQuestion = document.querySelectorAll(`label[for^="${questionKey}-opt-"] .quiz-img`);
    allImgsInQuestion.forEach(img => img.classList.remove('selected'));
    // 给当前选中的图片加样式
    document.querySelector(`label[for="${this.id}"] .quiz-img`).classList.add('selected');
  });
});

// 计算结果的按钮点击事件
document.getElementById('get-result').addEventListener('click', function() {
  // 这里可以根据你的测验规则计算结果，比如累加所有选项值
  let totalScore = 0;
  for (const key in quizAnswers) {
    totalScore += quizAnswers[key];
  }
  
  // 根据总分判断人格类型，这里是示例逻辑，你可以改成自己的规则
  let personalityType = '';
  if (totalScore <= -2) {
    personalityType = 'Mellow Dreamer';
  } else if (totalScore <= 3) {
    personalityType = 'Adventurous Mediator';
  } else {
    personalityType = 'Bold Trailblazer';
  }
  
  alert(`Your personality is: ${personalityType}! 🎉`);
});

第三步：添加CSS美化交互 #

给图片加一些样式，让它看起来可点击，选中时有明显的高亮：

.quiz-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: border-color 0.3s ease;
  margin: 0 10px;
}

.quiz-img.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

这样一来，用户点击图片就会触发单选按钮的选中状态，我们能实时保存选中值，最后还能根据这些值计算出人格测验的结果～

内容的提问来源于stack exchange，提问作者Kamila Jarek