HTML DOM Input Checkbox defaultChecked Property: ค่าเริ่มต้น

คุณสมบัติ defaultChecked คืนค่าสถานะเริ่มต้นของ checkbox (ว่าถูกติ๊กไว้ตอนโหลดหน้าหรือไม่) ค่าจะไม่เปลี่ยนแม้ผู้ใช้จะติ๊ก/ยกเลิกติ๊ก

รูปแบบ (Syntax)

object.defaultChecked

ตัวอย่างการใช้งาน

ตรวจสอบว่า checkbox ถูกติ๊กโดยค่าเริ่มต้นหรือไม่:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; }
        p { font-size: 1.5rem; color: #ff8741; }
        input { width: 30px; height: 30px; }
        button { background-color: #db133a; color: #fff; padding: 8px; border: none; width: 180px; margin: 0.5rem; border-radius: 50px; outline: none; font-weight: bold; }
        .show-msg { color: #db133a; font-size: 1.5rem; font-weight: bold; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง defaultChecked Property</h1>
    <p>คุณฉลาดไหม?</p>
    <input type="checkbox" checked> <br>
    <button onclick="checkDefault()">ตรวจสอบค่าเริ่มต้น</button>
    <div class="show-msg"></div>
    <script>
        function checkDefault() {
            var input = document.querySelector("input");
            var showMsg = document.querySelector(".show-msg");
            if (input.defaultChecked === true) {
                showMsg.innerHTML = "ถูกต้อง! คุณฉลาดโดยค่าเริ่มต้น";
            } else {
                showMsg.innerHTML = "เร้า... คุณไม่ได้ฉลาดโดยค่าเริ่มต้น";
            }
        }
    </script>
</body>
</html>

ความแตกต่างระหว่าง checked และ defaultChecked

การใช้งานจริง

เหมาะสำหรับการรีเซ็ตฟอร์มกลับสู่ค่าเริ่มต้น หรือตรวจสอบว่าผู้ใช้ได้เปลี่ยนค่าจากค่าเริ่มต้นหรือไม่