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

คุณสมบัติ required ของ input type="radio" เกี่ยวข้องกับแอตทริบิวต์ required ใช้สำหรับตั้งค่า/ดึงค่า ว่าจำเป็นต้องติ๊ก radio button นั้นก่อนส่งฟอร์มหรือไม่ ทำให้ฟอร์มไม่สามารถส่งได้หาก radio button ที่มี required ถูกทิ้งว่าง

ไวยากรณ์ (Syntax)

การตั้งค่า required:

radioObject.required = true|false

• true — ต้องติ๊ก radio button นี้ก่อนส่งฟอร์ม
• false — ไม่บังคับ (ค่าเริ่มต้น)

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ required ของ Radio</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
  ผลไม้: <input type="radio" name="fruits" id="Mango" required>มะม่วง
  <br><br>
  <input type="submit">
</form>
<button type="button" onclick="checkReq()">ตรวจสอบ</button>
<p id="Sample"></p>
<script>
  function checkReq() {
    var Req = document.getElementById("Mango").required;
    if (Req == true)
      document.getElementById("Sample").innerHTML = "Radio button ต้องถูกติ๊กก่อนส่งฟอร์ม";
    else
      document.getElementById("Sample").innerHTML = "Radio button ไม่บังคับ สามารถทิ้งว่างได้";
  }
</script>
</body>
</html>

ผลลัพธ์

หน้าเว็บแสดง radio button "มะม่วง" ที่มี required

คลิก "ตรวจสอบ": แสดงข้อความว่า "Radio button ต้องถูกติ๊กก่อนส่งฟอร์ม"

ลองกด "Submit" โดยไม่ติ๊ก: เบราว์เซอร์จะบล็อกการส่งฟอร์มและแสดงข้อความแจ้งเตือน

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

• Radio button มี id="Mango", name="fruits", required
• อยู่ในฟอร์มที่มี action="/Sample_page.php"
• ปุ่ม "ตรวจสอบ" เรียก checkReq() ซึ่งดึงค่า .required (boolean) มาแสดง

จุดสำคัญ: ในกลุ่ม radio button เดียวกัน (name เหมือนกัน) การตั้ง required ให้ตัวใดตัวหนึ่ง จะบังคับให้ต้องเลือกอย่างน้อยหนึ่งรายการในกลุ่มนั้น