请求实现根据单选按钮选中状态返回不同结果的功能

这看起来是个经典的二进制数字猜测游戏——每张卡片对应二进制的一位，用户选择yes/no后，我们就能通过计算选中的选项得出用户心里想的数字。下面是完整的实现方案：

思路说明 #

• 每张卡片对应一个二进制位数值（比如紫色=4、绿色=2、蓝色=1，对应二进制的第3、2、1位）
• 用户选yes就加上对应卡片的数值，选no则不加
• 最后把所有选中项的数值总和作为结果返回给用户

完整代码实现 #

完善后的HTML结构 #

先把你的HTML补全，加上触发计算的按钮和结果显示区域：

<div class="guess-game">
  <ul>
    <li>
      <h5>紫色卡片上有您的数字吗？</h5>
      <input type="radio" name="card1" value="A">yes<br>
      <input type="radio" name="card1" value="B">no<br>
    </li>
    <li>
      <h5>绿色卡片上有您的数字吗？</h5>
      <input type="radio" name="card2" value="A">yes<br>
      <input type="radio" name="card2" value="B">no<br>
    </li>
    <li>
      <h5>蓝色卡片上有您的数字吗？</h5>
      <input type="radio" name="card3" value="A">yes<br>
      <input type="radio" name="card3" value="B">no<br>
    </li>
  </ul>
  <button id="guessBtn">猜出我的数字！</button>
  <p id="result"></p>
</div>

JavaScript交互逻辑 #

添加JS来处理选择、计算结果并显示：

document.getElementById('guessBtn').addEventListener('click', function() {
  // 定义每张卡片对应的数值（对应二进制位的权重）
  const cardValues = {
    card1: { A: 4, B: 0 }, // 紫色卡片对应4（2²）
    card2: { A: 2, B: 0 }, // 绿色卡片对应2（2¹）
    card3: { A: 1, B: 0 }  // 蓝色卡片对应1（2⁰）
  };

  let total = 0;
  let hasUnselected = false;
  
  // 遍历每个卡片组，获取选中的值并累加
  Object.keys(cardValues).forEach(cardName => {
    const selectedOption = document.querySelector(`input[name="${cardName}"]:checked`);
    if (selectedOption) {
      total += cardValues[cardName][selectedOption.value];
    } else {
      hasUnselected = true;
    }
  });

  // 根据情况显示结果或提示
  if (hasUnselected) {
    document.getElementById('result').textContent = "请完成所有选项的选择哦！";
  } else {
    document.getElementById('result').textContent = `您想的数字是：${total}`;
  }
});

自定义调整说明 #

• 如果需要支持更大范围的数字，只需添加新的卡片组，并在cardValues里对应添加更高位的数值（比如第四张卡片对应8，即2³）
• 你可以随意修改提示文本、按钮样式，让界面更贴合你的设计需求

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