คุณสมบัติ HTML DOM Input Radio defaultChecked

คุณสมบัติ defaultChecked ของ input type="radio" ใช้ตรวจสอบว่า radio button ถูกติ๊กเป็นค่าเริ่มต้นหรือไม่ คืนค่า true หากมีแอตทริบิวต์ checked ตั้งแต่แรก, false หากไม่มี

ไวยากรณ์ (Syntax)

radioObject.defaultChecked

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ defaultChecked ของ Input Radio</h1>
<form>
  ผลไม้: <input type="radio" name="fruits" id="Mango" checked>มะม่วง
</form>
<br>
<button type="button" onclick="checkDefault()">ตรวจสอบ</button>
<p id="Sample"></p>
<script>
  function checkDefault() {
    var c = document.getElementById("Mango").defaultChecked;
    document.getElementById("Sample").innerHTML = "ค่า defaultChecked ของปุ่มคือ: " + c;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Radio button "มะม่วง" มีแอตทริบิวต์ checked อยู่แล้ว

คลิก "ตรวจสอบ": แสดง "ค่า defaultChecked ของปุ่มคือ: true"

คำอธิบายโค้ด

• Radio button มี checked attribute ตั้งแต่โหลดหน้า
• ปุ่ม "ตรวจสอบ" เรียก checkDefault()
• .defaultChecked คืนค่า true เพราะมี checked attribute ตั้งแต่ต้น

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

• checked — สถานะปัจจุบัน (ผู้ใช้อาจติ๊ก/ยกเลิกไปแล้ว) อ่าน/เขียนได้
• defaultChecked — สถานะเริ่มต้นจาก HTML attribute อ่านอย่างเดียว

คุณสมบัตินี้มีประโยชน์เมื่อต้องการรีเซ็ตฟอร์มกลับสู่ค่าเริ่มต้น