Check/Uncheck Checkbox ด้วย JavaScript

การควบคุม Checkbox ด้วย JavaScript ทำได้โดยการตั้งค่าคุณสมบัติ checked เป็น true (ติ๊ก) หรือ false (ไม่ติ๊ก)

ตัวอย่าง: Toggle Checkbox

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Checkbox</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; text-align: center; }
        input[type="checkbox"] { transform: scale(1.5); margin: 20px; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #667eea; color: white; border: none; border-radius: 4px; }
        button:hover { background: #5568d3; }
        .status { font-size: 18px; font-weight: 500; color: blueviolet; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Check / Uncheck Checkbox ด้วย JavaScript</h1>
    <input type="checkbox" id="myCheckbox">
    <label for="myCheckbox" style="font-size: 18px; cursor: pointer;"> ยอมรับเงื่อนไข</label>
    <br><br>
    <button class="Btn" id="toggleBtn">สลับสถานะ (Toggle)</button>
    <div class="status" id="status">สถานะ: ไม่ได้ติ๊ก</div>

    <script>
        const checkbox = document.getElementById("myCheckbox");
        const toggleBtn = document.getElementById("toggleBtn");
        const status = document.getElementById("status");
        
        // อัปเดตสถานะแสดงผล
        function updateStatus() {
            status.textContent = `สถานะ: ${checkbox.checked ? "✅ ติ๊กแล้ว" : "⬜ ไม่ได้ติ๊ก"}`;
        }
        
        // Toggle ด้วยปุ่ม
        toggleBtn.addEventListener("click", () => {
            checkbox.checked = !checkbox.checked; // สลับค่า
            updateStatus();
        });
        
        // ฟังการเปลี่ยนแปลงจาก UI ด้วย (User คลิกตรง Checkbox)
        checkbox.addEventListener("change", updateStatus);
        
        // เริ่มต้น
        updateStatus();
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Checkbox ว่าง, แสดง "สถานะ: ⬜ ไม่ได้ติ๊ก"
กด "สลับสถานะ": Checkbox ติ๊ก, แสดง "สถานะ: ✅ ติ๊กแล้ว"
กดอีกครั้ง: Checkbox ว่าง, แสดง "สถานะ: ⬜ ไม่ได้ติ๊ก"

วิธีการ Check/Uncheck ต่างๆ

1. ตั้งค่าลงตรง (Direct Assignment)

checkbox.checked = true;   // ติ๊ก
checkbox.checked = false;  // ยกเลิกติ๊ก

2. Toggle (สลับสถานะ)

checkbox.checked = !checkbox.checked;

3. ใช้ Indeterminate State (สถานะกลาง - สำหรับ "Select All")

const selectAll = document.getElementById("selectAll");
const items = document.querySelectorAll(".item-checkbox");

selectAll.addEventListener("change", () => {
    items.forEach(item => item.checked = selectAll.checked);
});

items.forEach(item => {
    item.addEventListener("change", () => {
        const checkedCount = [...items].filter(i => i.checked).length;
        selectAll.checked = checkedCount === items.length;
        selectAll.indeterminate = checkedCount > 0 && checkedCount < items.length;
    });
});

หลาย Checkbox พร้อมกัน

<!-- HTML -->
<button id="checkAll">ติ๊กทั้งหมด</button>
<button id="uncheckAll">ยกเลิกทั้งหมด</button>
<button id="toggleAll">สลับทั้งหมด</button>
<div class="checkbox-group">
    <label><input type="checkbox" class="item" value="1"> ตัวเลือก 1</label>
    <label><input type="checkbox" class="item" value="2"> ตัวเลือก 2</label>
    <label><input type="checkbox" class="item" value="3"> ตัวเลือก 3</label>
</div>

<script>
    const items = document.querySelectorAll(".item");
    
    document.getElementById("checkAll").addEventListener("click", () => {
        items.forEach(cb => cb.checked = true);
    });
    
    document.getElementById("uncheckAll").addEventListener("click", () => {
        items.forEach(cb => cb.checked = false);
    });
    
    document.getElementById("toggleAll").addEventListener("click", () => {
        items.forEach(cb => cb.checked = !cb.checked);
    });
    
    // ดึงค่าที่ติ๊กแล้ว
    function getCheckedValues() {
        return [...document.querySelectorAll(".item:checked")].map(cb => cb.value);
    }
</script>

Checkbox vs Radio Button

Accessibility

• ใช้ <label for="id"> ครอบหรือผูกกับ id ของ Checkbox
• เพิ่ม aria-describedby สำหรับคำอธิบายเพิ่มเติม
• สีสัญญาณ (Color) ไม่ควรเป็นวิธีเดียวที่บอกสถานะ