问了AI一个HTML问题：怎么让一排复选框支持按shift批量选中起点到终点的选框？

2025-12-27 09:01:30 建站教程浏览 0 评论

问了国产几大AI一个关于HTML问题：怎么让一排复选框支持按shift批量选中起点到终点的选框？

经过测试，KIMI、deepseek、豆包、通义千问给的答案都很好，而且都支持多个区间选择和取消选择，该有考虑到的都有考虑，也还不错，百度文心一言本次答案不及格，代码根本没法用。更搞笑的是，代码加密，根本不给你源代码😅 也是让人服气了。

问了AI一个HTML问题：怎么让一排复选框支持按shift批量选中起点到终点的选框？

下面贴上各家给的代码吧：

KIMI给的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shift 批量选中复选框</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .checkbox-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        .checkbox-item:hover {
            background-color: #f0f0f0;
        }
        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: pointer;
        }
        .checkbox-item label {
            cursor: pointer;
            font-size: 16px;
        }
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .instructions {
            background-color: #e3f2fd;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #1976d2;
        }
    </style>
</head>
<body>
    <div class="checkbox-container">
        <h2>复选框 Shift 批量选中示例</h2>
        <div class="instructions">
            💡 使用说明：先点击一个复选框，然后按住 Shift 键点击另一个复选框，即可选中两者之间的所有复选框。
        </div>
        
        <div class="checkbox-item">
            <input type="checkbox" id="item1" class="checkbox">
            <label for="item1">选项 1 - 苹果</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item2" class="checkbox">
            <label for="item2">选项 2 - 香蕉</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item3" class="checkbox">
            <label for="item3">选项 3 - 橙子</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item4" class="checkbox">
            <label for="item4">选项 4 - 葡萄</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item5" class="checkbox">
            <label for="item5">选项 5 - 草莓</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item6" class="checkbox">
            <label for="item6">选项 6 - 西瓜</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item7" class="checkbox">
            <label for="item7">选项 7 - 芒果</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="item8" class="checkbox">
            <label for="item8">选项 8 - 樱桃</label>
        </div>
    </div>

    <script>
        // 获取所有复选框
        const checkboxes = document.querySelectorAll('.checkbox');
        let lastChecked = null;

        // 为每个复选框添加点击事件监听器
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('click', handleCheck);
        });

        function handleCheck(e) {
            // 检查是否按下了 Shift 键且不是第一次点击
            if (e.shiftKey && lastChecked && lastChecked !== this) {
                // 确定开始和结束的索引
                const startIndex = Array.from(checkboxes).indexOf(lastChecked);
                const endIndex = Array.from(checkboxes).indexOf(this);
                
                // 确保开始索引小于结束索引
                const [start, end] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex];
                
                // 选中范围内的所有复选框
                for (let i = start; i <= end; i++) {
                    checkboxes[i].checked = true;
                }
            }
            
            // 更新最后点击的复选框
            lastChecked = this;
        }

        // 可选：添加全选/全不选功能
        function addSelectAllFeature() {
            const selectAllBtn = document.createElement('button');
            selectAllBtn.textContent = '全选';
            selectAllBtn.style.marginTop = '20px';
            selectAllBtn.style.marginRight = '10px';
            selectAllBtn.style.padding = '8px 16px';
            selectAllBtn.style.border = 'none';
            selectAllBtn.style.borderRadius = '4px';
            selectAllBtn.style.backgroundColor = '#4CAF50';
            selectAllBtn.style.color = 'white';
            selectAllBtn.style.cursor = 'pointer';
            
            const deselectAllBtn = document.createElement('button');
            deselectAllBtn.textContent = '全不选';
            deselectAllBtn.style.marginTop = '20px';
            deselectAllBtn.style.padding = '8px 16px';
            deselectAllBtn.style.border = 'none';
            deselectAllBtn.style.borderRadius = '4px';
            deselectAllBtn.style.backgroundColor = '#f44336';
            deselectAllBtn.style.color = 'white';
            deselectAllBtn.style.cursor = 'pointer';
            
            selectAllBtn.addEventListener('click', () => {
                checkboxes.forEach(checkbox => checkbox.checked = true);
            });
            
            deselectAllBtn.addEventListener('click', () => {
                checkboxes.forEach(checkbox => checkbox.checked = false);
            });
            
            document.querySelector('.checkbox-container').appendChild(selectAllBtn);
            document.querySelector('.checkbox-container').appendChild(deselectAllBtn);
        }

        // 添加全选/全不选功能
        addSelectAllFeature();
    </script>
</body>
</html>

豆包给的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Shift批量选中复选框</title>
    <style>
        /* 让复选框排成一排，简单美化 */
        .checkbox-group {
            display: flex;
            gap: 20px;
            padding: 20px;
            border: 1px solid #eee;
            width: fit-content;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
    </style>
</head>
<body>
    <div class="checkbox-group" id="checkboxContainer">
        <div class="checkbox-item">
            <input type="checkbox" id="cb1" value="1">
            <label for="cb1">选项1</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="cb2" value="2">
            <label for="cb2">选项2</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="cb3" value="3">
            <label for="cb3">选项3</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="cb4" value="4">
            <label for="cb4">选项4</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="cb5" value="5">
            <label for="cb5">选项5</label>
        </div>
    </div>

    <script>
        // 1. 获取所有复选框元素
        const checkboxes = document.querySelectorAll('#checkboxContainer input[type="checkbox"]');
        // 2. 记录上一次点击的复选框（批量选中的起点）
        let lastChecked = null;

        // 3. 为每个复选框绑定点击事件
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('click', handleCheckboxClick);
        });

        // 4. 核心点击事件处理函数
        function handleCheckboxClick(e) {
            // 如果按住了Shift键，且存在上一次点击的复选框，才触发批量选中
            if (e.shiftKey && lastChecked && lastChecked !== this) {
                // 找到所有复选框的数组形式（方便通过索引定位）
                const cbArray = Array.from(checkboxes);
                // 获取起点和当前复选框的索引
                const startIndex = cbArray.indexOf(lastChecked);
                const endIndex = cbArray.indexOf(this);
                // 确定遍历的起始和结束位置（兼容从左到右/从右到左）
                const minIndex = Math.min(startIndex, endIndex);
                const maxIndex = Math.max(startIndex, endIndex);

                // 批量设置中间所有复选框的选中状态（和当前点击的复选框状态一致）
                for (let i = minIndex; i <= maxIndex; i++) {
                    cbArray[i].checked = this.checked;
                }
            }

            // 更新“上一次点击的复选框”（只有当前点击不是通过Shift批量触发时，才更新）
            // 注：如果是普通点击（没按Shift），直接更新起点；如果是Shift点击，也更新（方便连续批量选）
            lastChecked = this;
        }
    </script>
</body>
</html>

通义千问给的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框Shift批量选中</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 500px;
            margin: 0 auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        
        .item {
            padding: 10px;
            border: 1px solid #ddd;
            margin: 5px 0;
            background-color: white;
            border-radius: 4px;
        }
        
        .item:hover {
            background-color: #f0f8ff;
        }
        
        .instructions {
            background-color: #e7f3ff;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .status {
            margin-top: 15px;
            padding: 10px;
            background-color: #f0f8ff;
            border-radius: 4px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>复选框Shift批量选中示例</h1>
        
        <div class="instructions">
            <p><strong>使用说明：</strong></p>
            <ul>
                <li>点击任意复选框选中/取消选中单个项目</li>
                <li>按住Shift键点击复选框，可以批量选中/取消选中两个复选框之间的所有项目</li>
                <li>按住Ctrl键可单独选择多个不连续的项目</li>
            </ul>
        </div>
        
        <div id="checkboxList">
            <!-- 复选框列表 -->
            <div class="item">
                <label>
                    <input type="checkbox" data-index="0"> 项目 1
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="1"> 项目 2
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="2"> 项目 3
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="3"> 项目 4
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="4"> 项目 5
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="5"> 项目 6
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="6"> 项目 7
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="7"> 项目 8
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="8"> 项目 9
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" data-index="9"> 项目 10
                </label>
            </div>
        </div>
        
        <button id="selectAllBtn" style="margin-right: 10px; padding: 8px 15px;">全选</button>
        <button id="clearAllBtn" style="padding: 8px 15px;">清空</button>
        
        <div id="status" class="status">
            当前选中: 0 个项目
        </div>
    </div>

    <script>
        // 获取所有复选框
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        let lastChecked = null; // 记录上次点击的复选框
        
        // 用于记录当前选中的复选框数量
        let checkedCount = 0;
        
        // 更新选中数量显示
        function updateStatus() {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = `当前选中: ${checkedCount} 个项目`;
        }
        
        // 计算选中数量
        function calculateCheckedCount() {
            checkedCount = Array.from(checkboxes).filter(checkbox => checkbox.checked).length;
            updateStatus();
        }
        
        // 为每个复选框添加事件监听器
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('click', function(e) {
                // 如果按住Shift键
                if (e.shiftKey && lastChecked) {
                    // 获取当前复选框的索引
                    const currentIndex = parseInt(this.getAttribute('data-index'));
                    // 获取上次点击复选框的索引
                    const lastIndex = parseInt(lastChecked.getAttribute('data-index'));
                    
                    // 确定范围
                    const start = Math.min(currentIndex, lastIndex);
                    const end = Math.max(currentIndex, lastIndex);
                    
                    // 批量选中/取消选中范围内的复选框
                    for (let i = start; i <= end; i++) {
                        const targetCheckbox = document.querySelector(`input[data-index="${i}"]`);
                        if (targetCheckbox) {
                            targetCheckbox.checked = this.checked;
                        }
                    }
                    
                    // 重新计算选中数量
                    calculateCheckedCount();
                } else {
                    // 普通点击，更新选中数量
                    if (this.checked) {
                        checkedCount++;
                    } else {
                        checkedCount--;
                    }
                    updateStatus();
                }
                
                // 更新上次点击的复选框
                lastChecked = this;
            });
        });
        
        // 全选按钮事件
        document.getElementById('selectAllBtn').addEventListener('click', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = true;
            });
            checkedCount = checkboxes.length;
            updateStatus();
        });
        
        // 清空按钮事件
        document.getElementById('clearAllBtn').addEventListener('click', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
            checkedCount = 0;
            updateStatus();
        });
        
        // 初始化选中数量
        calculateCheckedCount();
    </script>
</body>
</html>

deepseek给的代码，完整网页：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shift批量选中复选框实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .description {
            font-size: 1.1rem;
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto 20px;
            line-height: 1.6;
        }
        
        .instructions {
            background-color: rgba(52, 152, 219, 0.1);
            border-left: 4px solid #3498db;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }
        
        .instructions h3 {
            color: #2980b9;
            margin-bottom: 10px;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 5px;
            line-height: 1.5;
        }
        
        .card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .card-header {
            background: linear-gradient(to right, #3498db, #2c3e50);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-header h2 {
            font-size: 1.8rem;
        }
        
        .controls {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background-color: #2ecc71;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #27ae60;
        }
        
        .btn-secondary {
            background-color: #e74c3c;
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #c0392b;
        }
        
        .btn-info {
            background-color: #3498db;
            color: white;
        }
        
        .btn-info:hover {
            background-color: #2980b9;
        }
        
        .items-container {
            padding: 20px;
        }
        
        .selectable-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .selectable-item:hover {
            background-color: #f8f9fa;
        }
        
        .selectable-item.selected {
            background-color: #e8f4fc;
            border-left: 4px solid #3498db;
        }
        
        .selectable-item:last-child {
            border-bottom: none;
        }
        
        .item-checkbox {
            margin-right: 15px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .item-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .item-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .item-subtitle {
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .item-meta {
            display: flex;
            gap: 10px;
            color: #95a5a6;
            font-size: 0.85rem;
        }
        
        .status {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .status.pending {
            background-color: #fef9e7;
            color: #f39c12;
        }
        
        .status.completed {
            background-color: #eafaf1;
            color: #27ae60;
        }
        
        .status.in-progress {
            background-color: #ebf5fb;
            color: #3498db;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            color: #7f8c8d;
        }
        
        .selected-count {
            background-color: #3498db;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .key-hint {
            display: inline-flex;
            align-items: center;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 0.9rem;
            margin: 0 5px;
        }
        
        .stats {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }
        
        .stats-item {
            text-align: center;
        }
        
        .stats-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .stats-label {
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .controls {
                flex-direction: column;
                width: 100%;
                margin-top: 15px;
            }
            
            .btn {
                width: 100%;
            }
            
            .stats {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Shift批量选中复选框</h1>
            <p class="description">
                这是一个模拟Gmail等现代Web应用中Shift批量选中功能的完整实现。
                按住Shift键并点击复选框可以批量选择多个项目，提高操作效率。
            </p>
            <div class="instructions">
                <h3>使用说明</h3>
                <ul>
                    <li>点击单个复选框可以选中/取消选中该项目</li>
                    <li>按住 <span class="key-hint">Shift</span> 键并点击复选框，可以选中两个复选框之间的所有项目</li>
                    <li>使用下方的控制按钮可以快速全选、取消全选或反选所有项目</li>
                    <li>当前已选中 <span id="selectedCount" class="selected-count">0</span> 个项目</li>
                </ul>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>任务列表</h2>
                <div class="controls">
                    <button id="selectAllBtn" class="btn btn-primary">全选</button>
                    <button id="deselectAllBtn" class="btn btn-secondary">取消全选</button>
                    <button id="invertSelectionBtn" class="btn btn-info">反选</button>
                </div>
            </div>
            
            <div class="items-container" id="itemsContainer">
                <!-- 项目将通过JavaScript动态生成 -->
            </div>
            
            <div class="stats">
                <div class="stats-item">
                    <div class="stats-value" id="totalCount">10</div>
                    <div class="stats-label">总项目数</div>
                </div>
                <div class="stats-item">
                    <div class="stats-value" id="selectedStat">0</div>
                    <div class="stats-label">已选中</div>
                </div>
                <div class="stats-item">
                    <div class="stats-value" id="pendingCount">5</div>
                    <div class="stats-label">待处理</div>
                </div>
                <div class="stats-item">
                    <div class="stats-value" id="completedCount">2</div>
                    <div class="stats-label">已完成</div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>Shift批量选中复选框实现 &copy; 2023 | 按住Shift键实现高效批量选择</p>
        </div>
    </div>

    <script>
        // 模拟数据
        const itemsData = [
            { id: 1, title: "完成项目报告", subtitle: "整理Q3季度项目数据和分析", status: "pending", date: "2023-10-15" },
            { id: 2, title: "设计评审会议", subtitle: "与设计团队讨论新UI方案", status: "completed", date: "2023-10-14" },
            { id: 3, title: "代码重构", subtitle: "优化用户模块的性能问题", status: "in-progress", date: "2023-10-16" },
            { id: 4, title: "客户演示准备", subtitle: "准备产品演示材料和演讲稿", status: "pending", date: "2023-10-18" },
            { id: 5, title: "团队周会", subtitle: "每周团队进度同步和计划", status: "completed", date: "2023-10-13" },
            { id: 6, title: "更新技术文档", subtitle: "根据最新API变更更新文档", status: "pending", date: "2023-10-17" },
            { id: 7, title: "性能测试", subtitle: "对系统进行负载测试", status: "in-progress", date: "2023-10-16" },
            { id: 8, title: "安全性审计", subtitle: "检查系统潜在的安全漏洞", status: "pending", date: "2023-10-19" },
            { id: 9, title: "新功能规划", subtitle: "与产品经理讨论下一阶段功能", status: "pending", date: "2023-10-20" },
            { id: 10, title: "用户反馈分析", subtitle: "分析最近收集的用户反馈", status: "in-progress", date: "2023-10-15" }
        ];

        class ShiftSelect {
            constructor(containerId, itemsData) {
                this.container = document.getElementById(containerId);
                this.itemsData = itemsData;
                this.items = [];
                this.lastSelected = null;
                this.shiftKeyPressed = false;
                
                this.init();
                this.renderItems();
                this.setupEventListeners();
                this.updateStats();
            }
            
            init() {
                // 监听键盘事件以检测Shift键状态
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Shift') {
                        this.shiftKeyPressed = true;
                    }
                });
                
                document.addEventListener('keyup', (e) => {
                    if (e.key === 'Shift') {
                        this.shiftKeyPressed = false;
                    }
                });
                
                // 点击页面其他地方时重置Shift状态（防止Shift键卡住）
                document.addEventListener('click', (e) => {
                    if (!e.shiftKey) {
                        this.shiftKeyPressed = false;
                    }
                });
            }
            
            renderItems() {
                this.container.innerHTML = '';
                
                this.itemsData.forEach((itemData, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'selectable-item';
                    itemElement.dataset.id = itemData.id;
                    itemElement.dataset.index = index;
                    
                    const statusClass = `status ${itemData.status}`;
                    const statusText = itemData.status === 'pending' ? '待处理' : 
                                     itemData.status === 'completed' ? '已完成' : '进行中';
                    
                    itemElement.innerHTML = `
                        <input type="checkbox" class="item-checkbox" id="item-${itemData.id}">
                        <div class="item-content">
                            <div class="item-title">${itemData.title}</div>
                            <div class="item-subtitle">${itemData.subtitle}</div>
                            <div class="item-meta">
                                <span>${itemData.date}</span>
                                <span class="${statusClass}">${statusText}</span>
                            </div>
                        </div>
                    `;
                    
                    this.container.appendChild(itemElement);
                    this.items.push(itemElement);
                });
                
                // 为每个项目添加事件监听
                this.items.forEach(item => {
                    const checkbox = item.querySelector('.item-checkbox');
                    
                    // 点击项目本身
                    item.addEventListener('click', (e) => {
                        // 如果点击的是复选框，不重复处理
                        if (e.target === checkbox) return;
                        
                        e.preventDefault();
                        this.handleItemClick(item, !checkbox.checked, e);
                    });
                    
                    // 点击复选框
                    checkbox.addEventListener('click', (e) => {
                        this.handleCheckboxClick(e, item);
                    });
                });
            }
            
            handleItemClick(item, checked, event) {
                const checkbox = item.querySelector('.item-checkbox');
                
                if (this.shiftKeyPressed && this.lastSelected && this.lastSelected !== item) {
                    this.selectRange(item, this.lastSelected, checked);
                } else {
                    this.toggleItem(item, checked);
                }
                
                if (!this.shiftKeyPressed) {
                    this.lastSelected = item;
                }
                
                this.updateStats();
            }
            
            handleCheckboxClick(event, item) {
                const checkbox = event.target;
                
                if (this.shiftKeyPressed && this.lastSelected && this.lastSelected !== item) {
                    this.selectRange(item, this.lastSelected, checkbox.checked);
                } else {
                    this.toggleItem(item, checkbox.checked);
                }
                
                if (!this.shiftKeyPressed) {
                    this.lastSelected = item;
                }
                
                this.updateStats();
            }
            
            selectRange(currentItem, lastItem, checked) {
                const itemsArray = this.items;
                const startIndex = parseInt(lastItem.dataset.index);
                const endIndex = parseInt(currentItem.dataset.index);
                
                // 确定开始和结束索引
                const start = Math.min(startIndex, endIndex);
                const end = Math.max(startIndex, endIndex);
                
                // 选中范围内的所有项目
                for (let i = start; i <= end; i++) {
                    const checkbox = itemsArray[i].querySelector('.item-checkbox');
                    if (checkbox) {
                        checkbox.checked = checked;
                        this.toggleItem(itemsArray[i], checked);
                    }
                }
            }
            
            toggleItem(item, checked) {
                if (checked) {
                    item.classList.add('selected');
                } else {
                    item.classList.remove('selected');
                }
            }
            
            selectAll() {
                this.items.forEach(item => {
                    const checkbox = item.querySelector('.item-checkbox');
                    checkbox.checked = true;
                    this.toggleItem(item, true);
                });
                this.updateStats();
            }
            
            deselectAll() {
                this.items.forEach(item => {
                    const checkbox = item.querySelector('.item-checkbox');
                    checkbox.checked = false;
                    this.toggleItem(item, false);
                });
                this.lastSelected = null;
                this.updateStats();
            }
            
            invertSelection() {
                this.items.forEach(item => {
                    const checkbox = item.querySelector('.item-checkbox');
                    checkbox.checked = !checkbox.checked;
                    this.toggleItem(item, checkbox.checked);
                });
                this.updateStats();
            }
            
            updateStats() {
                const selectedItems = this.getSelectedItems();
                const selectedCount = selectedItems.length;
                
                // 更新选中计数
                document.getElementById('selectedCount').textContent = selectedCount;
                document.getElementById('selectedStat').textContent = selectedCount;
                
                // 更新待处理和已完成计数
                const pendingCount = this.itemsData.filter(item => item.status === 'pending').length;
                const completedCount = this.itemsData.filter(item => item.status === 'completed').length;
                
                document.getElementById('pendingCount').textContent = pendingCount;
                document.getElementById('completedCount').textContent = completedCount;
                document.getElementById('totalCount').textContent = this.itemsData.length;
            }
            
            getSelectedItems() {
                return this.items.filter(item => {
                    const checkbox = item.querySelector('.item-checkbox');
                    return checkbox && checkbox.checked;
                });
            }
            
            setupEventListeners() {
                // 全选按钮
                document.getElementById('selectAllBtn').addEventListener('click', () => {
                    this.selectAll();
                });
                
                // 取消全选按钮
                document.getElementById('deselectAllBtn').addEventListener('click', () => {
                    this.deselectAll();
                });
                
                // 反选按钮
                document.getElementById('invertSelectionBtn').addEventListener('click', () => {
                    this.invertSelection();
                });
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            const shiftSelect = new ShiftSelect('itemsContainer', itemsData);
            
            // 添加一个简单的键盘快捷键提示
            document.addEventListener('keydown', (e) => {
                // Ctrl+A 全选
                if (e.ctrlKey && e.key === 'a') {
                    e.preventDefault();
                    shiftSelect.selectAll();
                }
                
                // ESC 取消全选
                if (e.key === 'Escape') {
                    shiftSelect.deselectAll();
                }
            });
        });
    </script>
</body>
</html>

本站部分图片来源于互联网，如有侵权请联系删除。邮箱：admin#zjqbs.cn（#改为@）

主机情报社免费为您提供海外vps、服务器等购买咨询。

好文章，需要你的鼓励

上一篇：WordPress SEO优化：添加OG协议标签？

下一篇：如何做网站？小白零基础搭建个人网站教程

本栏推荐

建站教程

如何做网站？小白零基础搭建个人网站教程

近期，很多做私域的小伙伴发现自己的微信不断被封禁，连很多普通人都被殃及，连幼儿园老师给家长发微信缴学费都被封，微信也是做到了宁可枉杀三千，也不让一人漏网。一直以来给你足够安全感的微信也举起了屠刀，很多做私域的小伙

主机情报社
2026-01-01
435
建站教程

问了AI一个HTML问题：怎么让一排复选框支持按shift批量选中起点到终点的选框？

问了国产几大AI一个关于HTML问题：怎么让一排复选框支持按shift批量选中起点到终点的选框？经过测试，KIMI、deepseek、豆包、通义千问给的答案都很好，而且都支持多个区间选择和取消选择，该有考虑到的都有考虑，也还不错

主机情报社
2025-12-27
451
建站教程

WordPress SEO优化：添加OG协议标签

翻看一些主流网址的网页源代码，在 HTTP 头部经常能看到一些 og:type、og:title、og:image 的 meta 标签。这些 OG 是什么东西？有什么用？针对这些问题，虫子菌为你整理了以下资料。OG 协议是什么<meta property="og:locale"

主机情报社
2025-12-25
438
建站教程

帝国cms7.5版本的模板中支持emoji表情的方法

在帝国cms中如果发布的内容中包含了emoji表情，保存的时候会出错。如果我们想保留emoji表情，要怎么处理呢？今天，主机情报社社长教大家如何实现这个功能。

主机情报社
2025-11-19
505

评论

获取验证码

评论列表

共有条评论

匿名评论于 2024-08-13 20:19:38 [5楼]

网友匿名的原文：
aipay无法跳转充值，咋整呢

需要用科学上网

支持[0] 反对[0] 回复
匿名评论于 2024-08-11 21:26:44 [4楼]

aipay无法跳转充值，咋整呢

支持[2] 反对[2] 回复
匿名评论于 2024-08-06 23:00:06 [3楼]

网友匿名的原文：
用了几天，发现不分联通电信，在傍晚高峰期都会变得很慢。总体能用，这么便宜还要什么自行车

四川电信，访问速度基本上一直ok。尤其是sc2云服务器，更快。

支持[2] 反对[3] 回复
匿名评论于 2024-08-06 19:04:10 [2楼]

用了几天，发现不分联通电信，在傍晚高峰期都会变得很慢。总体能用，这么便宜还要什么自行车

支持[2] 反对[2] 回复
匿名评论于 2024-08-01 09:52:09 [1楼]

买了个10刀最低配的，默认进去硬盘5G分了成两个分区，4G当系统盘，已经占用99.8%，1G当swap分区，小白基本到这里就傻眼了，得自己删了swap分区扩容系统盘；
另外联通测速很好 10M+，电信下载只有100k，上传倒是很快

支持[2] 反对[2] 回复