Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính checked của Input Checkbox trong HTML DOM

Thuộc tính checked của checkbox trả về hoặc thiết lập trạng thái tích (**hiện tại**) của ô kiểm. Khác với defaultChecked, thuộc tính này **có thể thay đổi** lúc chạy.

Cú pháp

Lấy giá trị:

checkboxElement.checked

Thiết lập giá trị:

checkboxElement.checked = true | false

Ví dụ: Điều khiển checkbox bằng nút bấm

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; font-family: sans-serif; padding: 20px; }
        input[type="checkbox"] { width: 28px; height: 28px; }
        button {
            background-color: #dc3545; color: white; border: none;
            padding: 8px 16px; border-radius: 20px; cursor: pointer;
            margin: 5px; width: 100px;
        }
    </style>
</head>
<body>
    <h1>Ví dụ checked Property</h1>
    <p>Bạn vui không?</p>
    <input type="checkbox" id="happyCheck">
    <br><br>
    <button onclick="setChecked(true)">Có</button>
    <button onclick="setChecked(false)">Không</button>
    <script>
        function setChecked(val) {
            document.getElementById("happyCheck").checked = val;
        }
    </script>
</body>
</html>

Kết quả

Ban đầu chưa tích:

Thuộc tính checked của Input Checkbox trong HTML DOM

Nhấn "Có" → tích:

Thuộc tính checked của Input Checkbox trong HTML DOM

Nhấn "Không" → bỏ tích:

Thuộc tính checked của Input Checkbox trong HTML DOM

💡 Ứng dụng thực tế: Dùng checked để:
  • Kiểm tra người dùng đã đồng ý điều khoản trước khi submit form.
  • Tích/bỏ tích tất cả (select all) trong danh sách checkbox.
  • Lưu trạng thái UI vào localStorage.