如何在选中复选框时显示Div

基础概念

在前端开发中，复选框（checkbox）是一种常见的表单控件，用于允许用户选择一个或多个选项。当用户选中或取消选中复选框时，可以通过JavaScript或jQuery来触发相应的事件，从而实现显示或隐藏某个元素（如Div）。

类型

纯JavaScript实现：通过原生JavaScript监听复选框的change事件来实现显示或隐藏Div。
jQuery实现：利用jQuery的简洁语法来监听复选框的状态变化并控制Div的显示与隐藏。

应用场景

表单验证：在用户选中某个复选框时显示额外的验证信息或提示。
功能开关：通过复选框控制某个功能的开启或关闭，如显示/隐藏额外的设置选项。
内容筛选：根据用户选中的复选框来显示或隐藏特定的内容块。

示例代码（纯JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Show/Hide Div</title>
    <style>
        #hiddenDiv {
            display: none;
            border: 1px solid black;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="toggleCheckbox"> Show Div
    <div id="hiddenDiv">This is a hidden div!</div>

    <script>
        document.getElementById('toggleCheckbox').addEventListener('change', function() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (this.checked) {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        });
    </script>
</body>
</html>

示例代码（jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Show/Hide Div</title>
    <style>
        #hiddenDiv {
            display: none;
            border: 1px solid black;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" id="toggleCheckbox"> Show Div
    <div id="hiddenDiv">This is a hidden div!</div>

    <script>
        $('#toggleCheckbox').change(function() {
            $('#hiddenDiv').toggle(this.checked);
        });
    </script>
</body>
</html>