Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM Input คุณสมบัติประเภทวิทยุ


คุณสมบัติประเภทวิทยุ HTML DOM Input เชื่อมโยงกับองค์ประกอบอินพุตที่มี type=”radio” มันจะส่งคืนวิทยุสำหรับองค์ประกอบวิทยุอินพุตเสมอ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติประเภทวิทยุ -

radioObject.type

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input radio type Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
<br>
</form>
<p>Get the above input element type by clicking the below button</p>
<button type="button" onclick="radioType()">GET Type</button>
<p id="Sample"></p>
<script>
   function radioType() {
      var P=document.getElementById("Mango").type;
      document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM Input คุณสมบัติประเภทวิทยุ

เมื่อคลิกปุ่ม GET Type -

HTML DOM Input คุณสมบัติประเภทวิทยุ

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

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

จากนั้นเราได้สร้างปุ่ม "GET Type" ที่จะรันเมธอด radioType() เมื่อผู้ใช้คลิก -

<button type=”button” onclick="radioType()">GET Type</button>

เมธอด radioType() รับองค์ประกอบอินพุตโดยใช้เมธอด getElementById() และกำหนดค่าแอตทริบิวต์ประเภทให้กับตัวแปร P ตัวแปรนี้จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -

function getType() {
   var P = document.getElementById("Mango").type;
   document.getElementById("Sample").innerHTML = "The type for the input field is : "+P;
}