如何用JavaScript实现多选框勾选显隐文本及相关交互需求

你提到的功能完全可以用JavaScript实现，原有代码无法适配多选项的核心原因是重复使用了相同的id属性，HTML规范要求id全局唯一，document.getElementById()只会返回匹配到的第一个元素，因此无法控制其他复选框和对应文本。

以下是满足所有需求的完整实现：

完整代码 #

<!DOCTYPE html>
<html>
<body>
<p>Text Maker:</p>
<!-- 给每个checkbox加自定义属性data-text存储对应默认文本 -->
<input type="checkbox" class="option-box" data-text="Display Option 1 settings here.">
<label>Option 1</label> 
<input type="checkbox" class="option-box" data-text="Display Option 2 settings here.">
<label>Option 2</label> 
<input type="checkbox" class="option-box" data-text="Display Option 3 settings here.">
<label>Option 3</label> 

<!-- 统一展示编辑容器，设置为可编辑状态 -->
<div id="output-container" contenteditable="true" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 50px;"></div>

<script>
// 获取所有复选框
const checkboxes = document.querySelectorAll('.option-box');
const outputContainer = document.getElementById('output-container');

// 给每个复选框绑定状态变化事件
checkboxes.forEach(box => {
  box.addEventListener('change', updateOutput);
});

// 更新输出容器的逻辑
function updateOutput() {
  // 先清空容器原有内容
  outputContainer.innerHTML = '';
  // 按复选框的排列顺序遍历
  checkboxes.forEach(box => {
    if (box.checked) {
      // 选中项的对应文本追加到容器，每项单独占一行
      const p = document.createElement('p');
      p.textContent = box.dataset.text;
      outputContainer.appendChild(p);
    }
  });
}
</script>
</body>
</html>

功能说明 #

• 勾选/取消勾选复选框时会自动更新展示内容，完全按照复选框的排列顺序展示选中项的文本
• 整个output-container容器设置了contenteditable="true"属性，可直接在容器内编辑所有显示的文本，满足同一容器编辑的需求
• 后续新增选项仅需要复制checkbox结构修改对应文本即可，无需调整JS代码，拓展性更强

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