如何在切换复选框时添加并恢复默认元素（非隐藏/显示方式）

我来帮你搞定这个需求！核心思路是通过动态修改DOM内容来实现，完全不用隐藏/显示的方式，直接替换对应区域的HTML内容。下面是完整的可运行代码，我已经帮你修正了原代码里的标签闭合问题，并且实现了所有需求：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label><input type="checkbox" id="toggleName"> 输入你的姓名</label>
    <div id="contentArea">
        <p>You don't have a name</p>
    </div>

    <script>
        $(function(){
            // 定义默认文本的HTML结构
            const defaultText = '<p>You don\'t have a name</p>';
            // 定义输入区域的完整HTML
            const inputContent = `
                <div class="added">
                    <p>
                        <label>What is your name? </label>
                        <input type="text" id="A">
                    </p>
                    <p>Your name is: <span class="Y"></span></p>
                </div>
            `;

            // 监听复选框的切换事件
            $('#toggleName').on('change', function(){
                if($(this).is(':checked')){
                    // 勾选状态：替换内容为输入区域
                    $('#contentArea').html(inputContent);
                    // 绑定输入框的实时更新事件，覆盖键盘输入和粘贴场景
                    $('#A').on('keyup input', function(){
                        $('.Y').text($(this).val());
                    });
                } else {
                    // 取消勾选：直接替换回默认文本
                    $('#contentArea').html(defaultText);
                }
            });
        });
    </script>
</body>
</html>

关键细节说明： #

• 用一个#contentArea容器统一承载动态变化的内容，初始状态就渲染默认文本
• 复选框切换时，直接替换容器内的完整HTML：
  • 勾选时插入输入区域，同时给输入框绑定双事件保证实时同步输入内容
  • 取消勾选时直接把容器内容重置为默认文本，完全符合「不使用隐藏/显示」的要求
• 修复了原代码里未闭合的标签问题，确保HTML结构合法

运行这段代码后，勾选复选框会出现输入框，输入姓名时下方会实时显示；取消勾选时，输入区域会被完全替换回默认文本，完美实现你的需求！

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