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

คุณสมบัติ value ของ input type="radio" เกี่ยวข้องกับแอตทริบิวต์ value ใช้สำหรับ ดึงค่าหรือตั้งค่า value attribute ของ radio button

คุณสมบัติ value ไม่ส่งผลต่อ UI (ไม่แสดงบนหน้าจอ) แต่ใช้เพื่อ แยกแยะระหว่าง radio buttons ในกลุ่มเดียวกัน เมื่อส่งฟอร์ม — เซิร์ฟเวอร์จะได้รับค่า value ของ radio button ที่ถูกเลือก

ไวยากรณ์ (Syntax)

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

radioObject.value = text;

text คือค่าที่ต้องการกำหนดให้ radio button

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

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

ผลลัพธ์

เริ่มต้น: Radio button "มะม่วง" มี value="Mango"

คลิก "ดูค่า": แสดง "ค่า value ของ radio button คือ: Mango"

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

• Radio button: type="radio", name="fruits", id="BTN1", value="Mango"
• ปุ่ม "ดูค่า" เรียก getValue()
• ฟังก์ชันดึง .value property แล้วแสดงผล

สำคัญ: หากไม่ระบุ value attribute, ค่า .value จะคืนค่า "on" (string) ตามมาตรฐาน HTML — ควรกำหนด value ให้ชัดเจนเสมอเพื่อความชัดเจนฝั่งเซิร์ฟเวอร์

หมายเหตุ: ตัวอย่างโค้ดต้นฉบับมีข้อผิดพลาดในส่วนคำอธิบาย (อ้างอิง PASS1 แทน BTN1) — ได้แก้ไขในคำอธิบายด้านบนแล้ว