home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

อินพุต HTML DOM ชื่อวิทยุ คุณสมบัติ

คุณสมบัติชื่อวิทยุ HTML DOM Input ใช้สำหรับการตั้งค่าหรือส่งคืนแอตทริบิวต์ชื่อของช่องสัญญาณอินพุต แอตทริบิวต์ชื่อช่วยในการระบุข้อมูลแบบฟอร์มหลังจากที่ถูกส่งไปยังเซิร์ฟเวอร์แล้ว JavaScript ยังใช้แอตทริบิวต์ชื่อเพื่ออ้างอิงองค์ประกอบของแบบฟอร์มเพื่อจัดการในภายหลังได้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติชื่อ

radioObject.name = name

ในที่นี้ เป็นชื่อสำหรับระบุชื่อปุ่มตัวเลือก

ตัวอย่าง

เรามาดูตัวอย่างคุณสมบัติชื่อวิทยุกัน −

<!DOCTYPE html>
<html>
<body>
<h1>Input radio name Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>
<p>Change the name of the above radio button by clicking the below button</p>
<button type=”button” onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
   function changeName() {
      document.getElementById("Orange").name ="colors" ;
      document.getElementById("Sample").innerHTML = "Radio button name is now colors";
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

อินพุต HTML DOM ชื่อวิทยุ คุณสมบัติ

เมื่อคลิกปุ่ม CHANGE NAME -

อินพุต HTML DOM ชื่อวิทยุ คุณสมบัติ

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างองค์ประกอบอินพุตในรูปแบบที่มี type=”radio”, name=”fruits”, id=”Orange” −

<form>
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>

จากนั้นเราได้สร้างปุ่ม CHANGE NAME ซึ่งจะรันเมธอด changeName() เมื่อผู้ใช้คลิก -

<button type=”button” onclick="changeName()">CHANGE NAME</button>

เมธอด changeName() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีวิทยุประเภท และตั้งค่าแอตทริบิวต์ชื่อเป็น "สี" การเปลี่ยนแปลงนี้จะสะท้อนให้เห็นในย่อหน้าที่มีรหัส "ตัวอย่าง" และใช้คุณสมบัติ innerHTML เพื่อแสดงข้อความที่ต้องการ -

function changeName() {
   document.getElementById("Orange").name ="colors" ;
   document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}