HTML DOM Input Radio thuộc tính bắt buộc

Thuộc tính radio bắt buộc đầu vào HTML DOM được liên kết với thuộc tính bắt buộc của phần tử . Thuộc tính bắt buộc được sử dụng để thiết lập và quay lại nếu cần kiểm tra một số nút radio hay không trước khi biểu mẫu được gửi đến máy chủ. Điều này cho phép biểu mẫu không gửi nếu người dùng bỏ chọn một nút radio có thuộc tính bắt buộc.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính bắt buộc.

radioObject.required = true|false

Ở đây, true đại diện cho nút radio phải được chọn trong khi false đại diện cho tùy chọn kiểm tra nút radio trước khi gửi biểu mẫu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính yêu cầu radio đầu vào -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Input Radio thuộc tính bắt buộc

Khi nhấp vào nút KIỂM TRA -

HTML DOM Input Radio thuộc tính bắt buộc

Khi nhấp vào nút “Gửi” mà nút radio không được chọn -

HTML DOM Input Radio thuộc tính bắt buộc

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một nút radio đầu vào với id "Mango", tên "trái cây" và thuộc tính bắt buộc được đặt thành true. Nút radio chứa bên trong biểu mẫu có action =”Sample_page.php” để chỉ định nơi gửi dữ liệu biểu mẫu khi nhấp vào nút gửi. Biểu mẫu cũng có một kiểu nội tuyến được áp dụng cho nó -

<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>

Sau đó, chúng tôi đã tạo một nút CHECK sẽ thực thi phương thức checkReq () khi người dùng nhấp vào.

<button type=”button” onclick="checkReq()">CHECK</button>

Phương thức checkReq () sử dụng phương thức getElementById () để lấy phần tử đầu vào có kiểu radio và nhận thuộc tính bắt buộc của nó, trong trường hợp của chúng ta, giá trị này trả về true. Giá trị boolean trả về được gán cho một Req biến và dựa trên giá trị trả về cho dù nó đúng hay sai, chúng tôi hiển thị thông báo thích hợp trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML của nó -

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";
}