如何在JavaScript中获取多个复选框的选中值并在网页展示

嘿，我来给你分享两种实用的实现方式，你可以根据自己的需求来选择：

方法一：实时监听复选框状态，自动更新展示 #

这种方式会在用户选中或取消复选框时，立刻更新页面上的展示内容，体验更流畅。

首先，我们需要给页面加一个用来展示选中结果的区域，修改后的HTML如下：

<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" value="JAVA">
 <label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" value="HTML">
 <label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" value="CSS" >
 <label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<!-- 新增：用来展示选中技能的区域 -->
<div id="selectedSkills">已选中的技能：</div>

然后添加对应的JavaScript代码：

// 获取所有带skill类的复选框元素
const checkboxes = document.querySelectorAll('.skill');
// 获取展示结果的DOM元素
const displayArea = document.getElementById('selectedSkills');

// 定义一个更新展示内容的函数
function updateSelectedSkills() {
  // 筛选出已选中的复选框，提取它们的value值
  const selectedSkills = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);
  
  // 更新展示区域的文本内容
  displayArea.textContent = `已选中的技能：${selectedSkills.join(', ')}`;
}

// 给每个复选框绑定change事件，状态变化时触发更新
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateSelectedSkills);
});

// 页面加载完成后，先执行一次更新，确保初始状态正确
updateSelectedSkills();

方法二：通过按钮触发，主动获取并展示 #

如果你希望用户点击按钮后才展示选中的结果，可以用这种方式，还能顺便处理未选中任何选项的空状态：

先给HTML添加一个按钮和展示区域：

<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" value="JAVA">
 <label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" value="HTML">
 <label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" value="CSS" >
 <label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<!-- 新增：触发按钮 -->
<button id="showSkillsBtn">查看已选中技能</button>
<!-- 新增：展示区域 -->
<div id="selectedSkills"></div>

对应的JavaScript代码：

// 获取按钮和展示区域元素
const showBtn = document.getElementById('showSkillsBtn');
const displayArea = document.getElementById('selectedSkills');

// 给按钮绑定点击事件
showBtn.addEventListener('click', () => {
  // 直接获取所有已选中的skill复选框，提取value值
  const selectedSkills = Array.from(document.querySelectorAll('.skill:checked'))
    .map(checkbox => checkbox.value);
  
  // 根据是否有选中项，展示不同内容
  if (selectedSkills.length === 0) {
    displayArea.textContent = '你还没有选中任何技能哦';
  } else {
    displayArea.textContent = `已选中的技能：${selectedSkills.join(', ')}`;
  }
});

这两种方法都很容易理解和实现，你可以根据自己的业务场景来选~

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