如何在勾选（多个）复选框时显示文本？

没问题，我来帮你实现这个功能。首先梳理下需求：当勾选表格里的复选框时，显示那个隐藏的<p id="text">里的文本。咱们一步步来：

首先先修正你代码里的小问题，再添加对应的JavaScript逻辑：

1. 修复复选框的HTML语法问题 #

你写的复选框有两个重复的name="userSelection"属性，这不符合HTML规范，先去掉其中一个。修改后的PHP生成复选框的代码如下：

echo '<td><input type="checkbox" name="userSelection" onclick="userSelectHandler(this)"></td>';

2. 添加JavaScript处理函数 #

在你的HTML页面的<script>标签里（或者外部JS文件中）添加以下函数：

function userSelectHandler(checkbox) {
  // 获取隐藏的文本元素
  const textElement = document.getElementById('text');
  
  // 根据复选框的勾选状态控制元素显示/隐藏
  if (checkbox.checked) {
    textElement.style.display = 'block'; // 显示元素，也可以用'inline'等值，根据你的布局需求调整
  } else {
    textElement.style.display = 'none'; // 隐藏元素
  }
}

3. 效果说明 #

• 当你勾选任意一个复选框时，页面上的<p id="text">会从隐藏状态变为显示，展示"hello"文本；
• 取消勾选该复选框时，文本会重新隐藏。

扩展：勾选任意复选框就显示，全部取消才隐藏 #

如果你的需求是只要有一个复选框被勾选就显示文本，全部取消勾选才隐藏，可以调整逻辑：

function userSelectHandler() {
  const textElement = document.getElementById('text');
  // 获取所有name为userSelection的复选框
  const checkboxes = document.querySelectorAll('input[name="userSelection"]');
  // 判断是否有至少一个复选框被勾选
  const hasChecked = Array.from(checkboxes).some(box => box.checked);
  
  textElement.style.display = hasChecked ? 'block' : 'none';
}

对应的复选框onclick事件改成：

echo '<td><input type="checkbox" name="userSelection" onclick="userSelectHandler()"></td>';

这样不管你勾选哪一个复选框，文本都会显示；只有当所有复选框都取消勾选时，文本才会隐藏。

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