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

คุณสมบัติค่าวิทยุ HTML DOM Input เชื่อมโยงกับองค์ประกอบอินพุตที่มี type=”radio” และแอตทริบิวต์ค่า ใช้เพื่อคืนค่าแอตทริบิวต์ค่าของปุ่มตัวเลือกหรือตั้งค่า

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

ไวยากรณ์

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

ตั้งค่าคุณสมบัติ -

radioObject.value = text;

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

ตัวอย่าง

ให้เราดูตัวอย่างของคุณสมบัติค่าวิทยุอินพุต -

<!DOCTYPE html>
<html>
<body>
<h1>Input radio Value property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="BTN1" value="Mango" >Mango
<br>
</form>
<p>Get the above element value by clicking the below button</p>
<button type=”button” onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("BTN1").value;
      document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
   }
</script>
</body>
</html>

ผลลัพธ์

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

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

เมื่อคลิกปุ่ม "รับค่า" -

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

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

ขั้นแรกเราได้สร้างองค์ประกอบอินพุตในรูปแบบที่มีประเภท=”วิทยุ” ชื่อ=”ผลไม้” id=”BTN1” และค่า “มะม่วง” –

<form>
FRUIT:
<input type="radio" name="fruits" id=”BTN1" value=”mango>Mango
</form>

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

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

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

function getValue() {
   var t = document.getElementById("PASS1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}