求助：实现点击按钮获取选中checkbox值的功能

没问题！我来给你提供一个简洁易懂的实现方案，分HTML结构、JavaScript逻辑两部分，还加了点基础样式让界面更舒服～

HTML 结构 #

首先我们先搭建页面元素：三个带不同值的复选框、一个触发按钮，还有一个用来展示选中结果的区域：

<div class="container">
  <label>
    <input type="checkbox" value="苹果" class="fruit-checkbox"> 苹果
  </label>
  <label>
    <input type="checkbox" value="香蕉" class="fruit-checkbox"> 香蕉
  </label>
  <label>
    <input type="checkbox" value="橙子" class="fruit-checkbox"> 橙子
  </label>
  
  <button id="showSelectedBtn">查看选中的值</button>
  
  <div id="resultArea" class="result"></div>
</div>

JavaScript 逻辑 #

接下来写核心逻辑：监听按钮的点击事件，获取所有被选中的复选框，收集它们的value值，最后展示出来。如果没有选中任何复选框，也给个友好提示：

// 获取按钮和结果区域元素
const showBtn = document.getElementById('showSelectedBtn');
const resultArea = document.getElementById('resultArea');

// 绑定点击事件
showBtn.addEventListener('click', function() {
  // 获取所有被选中的复选框
  const selectedCheckboxes = document.querySelectorAll('.fruit-checkbox:checked');
  
  // 把选中的复选框转化为数组，再提取它们的value值
  const selectedValues = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
  
  // 根据选中情况展示结果
  if (selectedValues.length > 0) {
    resultArea.textContent = `你选中的是：${selectedValues.join('、')}`;
  } else {
    resultArea.textContent = '还没有选中任何选项哦～';
  }
});

可选：基础样式优化 #

加一点点CSS让界面更美观，你可以根据自己的需求调整样式细节：

.container {
  margin: 20px;
  font-size: 16px;
}
label {
  display: block;
  margin: 8px 0;
}
button {
  margin: 10px 0;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #409eff;
  color: white;
}
.result {
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  min-height: 24px;
}

这个方案很灵活，你可以轻松修改checkbox的value和文本，就算后续扩展更多复选框，逻辑也完全通用～

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