Thuộc tính giá trị vô tuyến Đầu vào HTML DOM được liên kết với phần tử đầu vào có kiểu =”radio” và thuộc tính giá trị. Nó được sử dụng để trả về giá trị của thuộc tính giá trị nút radio hoặc để đặt nó.
Thuộc tính giá trị cho nút radio không ảnh hưởng đến giao diện người dùng của trang web vì nội dung chỉ đơn giản là không được hiển thị. Tuy nhiên, nó có thể được sử dụng để phân biệt giữa một số nút của cùng một nhóm khi biểu mẫu được gửi.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính giá trị -
radioObject.value = text;
Ở đây, văn bản được sử dụng để chỉ định giá trị cho nút radio.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính giá trị vô tuyến đầu vào -
<!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>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút “Nhận giá trị” -
Trong ví dụ trên -
Trước tiên, chúng tôi đã tạo một phần tử đầu vào bên trong một biểu mẫu với type =”radio”, name =”results”, id =”BTN1” và giá trị “Mango” -
<form> FRUIT: <input type="radio" name="fruits" id=”BTN1" value=”mango>Mango </form>
Sau đó, chúng tôi tạo nút “GET Type” sẽ thực thi phương thức radioType () khi người dùng nhấp vào -
<button type=”button” onclick="radioType()">GET Type</button>
Phương thức getValue () nhận phần tử đầu vào bằng phương thức getElementById () và gán giá trị thuộc tính “value” của nó cho biến t. Nó sẽ trả về một vết trống nếu thuộc tính value chưa được chỉ định cho nút radio. Sau đó, biến này được hiển thị trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -
function getValue() { var t = document.getElementById("PASS1").value; document.getElementById("Sample").innerHTML = "The value for the input field is : "+t; }