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

คุณสมบัติ name ของ input type="radio" ใช้สำหรับตั้งค่าหรือดึงค่าแอตทริบิวต์ name ของ radio button แอตทริบิวต์ name ช่วยระบุข้อมูลฟอร์มหลังส่งไปยังเซิร์ฟเวอร์ และ JavaScript ใช้ name เพื่ออ้างอิงและจัดการองค์ประกอบฟอร์มได้

ไวยากรณ์ (Syntax)

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

radioObject.name = name

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

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ name ของ Input Radio</h1>
<form id="FORM1">
  ผลไม้: <input type="radio" name="fruits" id="Orange">ส้ม
</form>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนชื่อ radio button</p>
<button type="button" onclick="changeName()">เปลี่ยนชื่อ</button>
<p id="Sample"></p>
<script>
  function changeName() {
    document.getElementById("Orange").name = "colors";
    document.getElementById("Sample").innerHTML = "ชื่อ radio button ตอนนี้คือ colors";
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Radio button มี name="fruits"

หลังคลิก "เปลี่ยนชื่อ": name เปลี่ยนเป็น "colors" และข้อความยืนยันแสดงขึ้น

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

• Radio button เริ่มต้น: type="radio", name="fruits", id="Orange"
• ปุ่ม "เปลี่ยนชื่อ" เรียก changeName()
• ฟังก์ชันเปลี่ยน .name เป็น "colors" แล้วแสดงผลทาง innerHTML

การใช้งานจริง: แอตทริบิวต์ name สำคัญมากสำหรับการจัดกลุ่ม radio buttons — radio buttons ที่มี name เหมือนกันจะเป็นกลุ่มเดียวกัน (เลือกได้เพียงตัวเดียวในกลุ่ม)