คุณสมบัติที่จำเป็นของวิทยุอินพุต HTML DOM เชื่อมโยงกับแอตทริบิวต์ที่จำเป็นขององค์ประกอบ คุณสมบัติที่จำเป็นใช้สำหรับการตั้งค่าและส่งคืนหากจำเป็นต้องตรวจสอบปุ่มตัวเลือกบางส่วนหรือไม่ก่อนที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ ซึ่งจะทำให้ไม่สามารถส่งแบบฟอร์มได้หากผู้ใช้ไม่ได้เลือกปุ่มตัวเลือกที่มีแอตทริบิวต์ที่จำเป็น
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติที่ต้องการ
radioObject.required = true|false
ในที่นี้ true หมายถึงปุ่มตัวเลือกที่ต้องตรวจสอบ ในขณะที่ false หมายถึงตัวเลือกในการตรวจสอบปุ่มตัวเลือกก่อนส่งแบบฟอร์ม
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับคุณสมบัติที่จำเป็นของวิทยุอินพุต -
<!DOCTYPE html>
<html>
<body>
<h1>Radio required property</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>
<button type=”button” onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before
submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be
left unchecked by the user";
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มตรวจสอบ -
เมื่อคลิกปุ่ม "ส่ง" โดยไม่ได้ตรวจสอบปุ่มตัวเลือก -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างปุ่มตัวเลือกอินพุตที่มีรหัส "มะม่วง" ชื่อ "ผลไม้" และตั้งค่าแอตทริบิวต์ที่จำเป็นเป็น "จริง" ปุ่มตัวเลือกที่อยู่ภายในแบบฟอร์มซึ่งมี action=”Sample_page.php” สำหรับระบุตำแหน่งที่จะส่งข้อมูลในแบบฟอร์มเมื่อคลิกปุ่มส่ง แบบฟอร์มยังมีรูปแบบอินไลน์ที่ใช้กับมัน -
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php"> FRUIT: <input type="radio" name="fruits" id="Mango" required>Mango <br><br> <input type="submit"> </form>
จากนั้นเราได้สร้างปุ่ม CHECK ที่จะรันเมธอด checkReq() เมื่อมีการคลิกโดยผู้ใช้
<button type=”button” onclick="checkReq()">CHECK</button>
เมธอด checkReq() ใช้เมธอด getElementById() เพื่อรับองค์ประกอบอินพุตด้วยวิทยุประเภทและรับคุณสมบัติที่จำเป็น ซึ่งในกรณีของเราคืนค่าเป็น จริง ค่าบูลีนที่ส่งคืนถูกกำหนดให้กับตัวแปร Req และขึ้นอยู่กับค่าที่ส่งคืนไม่ว่าจะเป็นจริงหรือเท็จ เราแสดงข้อความที่เหมาะสมในย่อหน้าที่มี id “Sample” โดยใช้คุณสมบัติ innerHTML -
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
} 