Check/Uncheck Checkbox bằng JavaScript

Cơ bản

Sử dụng thuộc tính checked (boolean) của checkbox element.

// Lấy trạng thái
const isChecked = checkbox.checked;

// Set trạng thái
checkbox.checked = true;  // Check
checkbox.checked = false; // Uncheck

// Toggle
checkbox.checked = !checkbox.checked;

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Toggle</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; padding: 20px; text-align: center; }
        .checkbox-group { margin: 20px 0; }
        input[type="checkbox"] { transform: scale(1.5); margin: 0 10px; }
        label { font-size: 18px; cursor: pointer; }
        button { padding: 12px 24px; font-size: 16px; background: #1976d2; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
        .status { font-size: 18px; font-weight: 500; margin: 20px 0; padding: 15px; border-radius: 4px; }
        .checked { color: #2e7d32; background: #e8f5e9; }
        .unchecked { color: #c62828; background: #ffebee; }
    </style>
</head>
<body>
    <h1>Check/Uncheck Checkbox</h1>
    
    <div class="checkbox-group">
        <input type="checkbox" id="myCheck">
        <label for="myCheck">Đồng ý điều khoản</label>
    </div>
    
    <div class="status" id="status">Trạng thái: Chưa chọn</div>
    
    <button id="btnToggle">TOGGLE</button>
    <button id="btnCheck">CHECK</button>
    <button id="btnUncheck">UNCHECK</button>

    <script>
        const checkbox = document.getElementById('myCheck');
        const statusEle = document.getElementById('status');
        const btnToggle = document.getElementById('btnToggle');
        const btnCheck = document.getElementById('btnCheck');
        const btnUncheck = document.getElementById('btnUncheck');

        function updateStatus() {
            statusEle.textContent = `Trạng thái: ${checkbox.checked ? 'Đã chọn ✅' : 'Chưa chọn ❌'}`;
            statusEle.className = 'status ' + (checkbox.checked ? 'checked' : 'unchecked');
        }

        // Sync khi user click trực tiếp
        checkbox.addEventListener('change', updateStatus);

        btnToggle.addEventListener('click', () => {
            checkbox.checked = !checkbox.checked;
            updateStatus();
        });

        btnCheck.addEventListener('click', () => {
            checkbox.checked = true;
            updateStatus();
        });

        btnUncheck.addEventListener('click', () => {
            checkbox.checked = false;
            updateStatus();
        });

        updateStatus();
    </script>
</body>
</html>

Mở rộng: Check/Uncheck All (Checkbox Group)

<script>
const checkAll = document.getElementById('checkAll');
const items = document.querySelectorAll('.item-checkbox');

checkAll.addEventListener('change', () => {
    items.forEach(item => item.checked = checkAll.checked);
});

// Sync checkAll khi item thay đổi
items.forEach(item => {
    item.addEventListener('change', () => {
        checkAll.checked = [...items].every(i => i.checked);
        checkAll.indeterminate = [...items].some(i => i.checked) && !checkAll.checked;
    });
});

Indeterminate State (Trạng thái trung gian)

// Chỉ set qua JS, không qua HTML attribute
checkbox.indeterminate = true; // Hiển thị gạch ngang (một số item checked)
checkbox.indeterminate = false; // Trở về bình thường

Form Submit - Lấy giá trị checkbox

<form id="form">
    <input type="checkbox" name="skills" value="js"> JavaScript
    <input type="checkbox" name="skills" value="ts"> TypeScript
    <input type="checkbox" name="skills" value="react"> React
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // Chỉ lấy giá trị của checkbox được check
    const skills = formData.getAll('skills'); // ['js', 'react']
    console.log(skills);
});

CSS-only Toggle (Không cần JS)

/* Hidden checkbox + styled label */
.toggle { position: relative; display: inline-block; width: 60px; height: 30px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 30px; transition: .4s; }
.toggle .slider:before { content: ""; position: absolute; height: 22px; width: 22px; left: 4px; bottom: 4px; background: white; border-radius: 50%; transition: .4s; }
.toggle input:checked + .slider { background: #1976d2; }
.toggle input:checked + .slider:before { transform: translateX(30px); }