JavaScript实现复选框勾选时显示对应提示信息的问题

嘿，刚学JavaScript遇到这种小问题太正常啦，别慌！我帮你看看～

核心问题：重复的ID是大忌 #

你现在的代码里，三个复选框都用了myCheck这个ID，三个提示文本也都用了text——但HTML里的ID必须是唯一的！浏览器查找元素时，只会返回第一个匹配到的ID元素，所以只有第一个复选框能触发正确的显示逻辑。

修复方案1：给元素设置唯一ID（简单直接） #

我们给每个复选框和对应的提示文本分配独一无二的ID，然后让函数接收ID参数来处理：

修改后的HTML代码：

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox: <input type="checkbox" id="myCheck1" onclick="myFunction('myCheck1', 'text1')">
<p id="text1" style="display:none">Checkbox is CHECKED!</p>

Checkbox2: <input type="checkbox" id="myCheck2" onclick="myFunction('myCheck2', 'text2')">
<p id="text2" style="display:none">Second checkbox is checked</p>

Checkbox3: <input type="checkbox" id="myCheck3" onclick="myFunction('myCheck3', 'text3')">
<p id="text3" style="display:none">Third checkbox is checked</p>

</body>
</html>

修改后的JavaScript代码：

function myFunction(checkId, textId) {
    var checkBox = document.getElementById(checkId);
    var text = document.getElementById(textId);
    // 用三元运算符简化判断逻辑
    text.style.display = checkBox.checked ? "block" : "none";
}

修复方案2：利用DOM关系（更优雅，扩展性强） #

如果以后要加更多复选框，总不能一直改ID吧？我们可以通过点击事件的target（当前点击的元素），直接找到它后面紧邻的提示文本，不用给任何元素加ID：

修改后的HTML代码：

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox: <input type="checkbox" onclick="myFunction(event)">
<p style="display:none">Checkbox is CHECKED!</p>

Checkbox2: <input type="checkbox" onclick="myFunction(event)">
<p style="display:none">Second checkbox is checked</p>

Checkbox3: <input type="checkbox" onclick="myFunction(event)">
<p style="display:none">Third checkbox is checked</p>

</body>
</html>

修改后的JavaScript代码：

function myFunction(event) {
    // 获取当前点击的复选框元素
    const checkBox = event.target;
    // 找到复选框后面紧邻的<p>标签（就是对应的提示文本）
    const text = checkBox.nextElementSibling;
    // 根据勾选状态切换显示
    text.style.display = checkBox.checked ? "block" : "none";
}

这个方法的好处是，不管你加多少个复选框，只要保持「复选框+紧邻的提示p标签」的结构，JS代码都不用改，非常方便～

以后写HTML记得哦，ID是用来唯一标识元素的，绝对不能重复使用！

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