如何将select标签替换为checkbox实现网站明暗主题切换

之前你用<select>结合jQuery完成了主题切换功能，现在改成用<checkbox>来实现明暗主题的一键切换，下面是调整后可以正常运行的完整方案，已经适配了Cookie来持久化用户的主题偏好：

核心逻辑说明 #

1. 页面加载时读取Cookie，判断用户之前选择的主题，自动设置checkbox的选中状态
2. 监听checkbox的状态变化，切换对应的样式表并更新Cookie
3. 保留了原有的淡入淡出切换动画，提升用户体验

完整代码实现 #

PHP 部分（处理主题偏好读取与默认值设置）

<?php 
if (isset($_COOKIE['css'])) {
    $style = $_COOKIE['css'];
} else {
    // 默认使用浅色主题
    $style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
} 
?>

HTML 部分（页面结构与资源引入）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 根据PHP变量加载对应样式表 -->
    <link rel="stylesheet" href="<?php echo $style; ?>.css">
    <!-- 引入jQuery和jQuery Cookie插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
    <div class="style">
        <label for="style">Dark Theme</label>
        <!-- 绑定for属性，点击label也能切换checkbox状态 -->
        <input type="checkbox" name="" id="style">
        <!-- 注：这个提交按钮可以移除，因为切换逻辑已经绑定在checkbox的状态变化上了 -->
        <button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
    </div>
</body>
</html>

jQuery 部分（主题切换逻辑）

$(document).ready(function() {
    var currentTheme = '<?php echo $style; ?>';
    
    // 初始化checkbox状态：如果当前是深色主题则选中
    $("#style").prop('checked', currentTheme === 'https://bootswatch.com/3/darkly/bootstrap.min');

    // 监听checkbox的状态变化事件（比click更准确，支持label触发）
    $('#style').on('change', function() {
        // 根据checkbox状态选择对应的样式表路径
        var targetStyle = this.checked 
            ? 'https://bootswatch.com/3/darkly/bootstrap.min' 
            : 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
        
        // 执行样式切换，添加淡入淡出动画
        $('body').fadeOut("slow", function() {
            $('link[rel="stylesheet"]').attr("href", targetStyle + ".css");
            $('body').fadeIn("slow");
            // 将用户选择的主题保存到Cookie，有效期1年
            $.cookie("css", targetStyle, { expires: 365, path: '/' });
        });
    });
});

小优化建议 #

• 给<label>添加for="style"属性，这样点击文字也能切换checkbox，提升交互体验
• 可以移除页面中的#btnSubmit按钮，因为现在切换逻辑已经直接绑定在checkbox的状态变化上，不需要额外提交操作

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