Thuộc tính value của Input Radio trong HTML DOM

Thuộc tính value của HTML DOM Input Radio liên kết với phần tử input có type="radio" và thuộc tính value. Nó dùng để trả về giá trị thuộc tính value của nút radio hoặc thiết lập nó.

Thuộc tính value cho nút radio không ảnh hưởng đến giao diện người dùng vì nội dung đơn giản không hiển thị. Tuy nhiên nó có thể dùng để phân biệt các nút trong cùng nhóm khi form được submit.

Cú pháp

Cú pháp để thiết lập thuộc tính value:

radioObject.value = text;

Ở đây, text dùng để chỉ định giá trị cho nút radio.

Ví dụ

Ví dụ minh họa cho thuộc tính value của Input Radio:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính value của Input Radio</h1> 
<form> 
TRÁI CÂY: <input type="radio" name="fruits" id="BTN1" value="Mango" >Xoài <br> 
</form> 
<p>Lấy giá trị của phần tử trên bằng cách nhấn nút dưới đây</p> 
<button type="button" onclick="getValue()">LẤY GIÁ TRỊ</button> 
<p id="Sample"></p> 
<script> 
    function getValue() { 
        var t = document.getElementById("BTN1").value; 
        document.getElementById("Sample").innerHTML = "Giá trị cho nút radio là: "+t; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút "LẤY GIÁ TRỊ":

Trong ví dụ trên:

Chúng ta tạo phần tử input trong form với type="radio", name="fruits", id="BTN1" và value="Mango":

<form> TRÁI CÂY: <input type="radio" name="fruits" id="BTN1" value="Mango">Xoài </form>

Tạo nút "LẤY GIÁ TRỊ" thực thi phương thức getValue() khi được nhấn:

<button type="button" onclick="getValue()">LẤY GIÁ TRỊ</button>

Phương thức getValue() lấy phần tử bằng getElementById() và gán giá trị thuộc tính "value" cho biến t. Sẽ trả về chuỗi rỗng nếu value không được chỉ định. Biến này hiển thị trong đoạn văn id="Sample" qua innerHTML:

function getValue() { 
    var t = document.getElementById("BTN1").value; 
    document.getElementById("Sample").innerHTML = "Giá trị cho nút radio là: "+t; 
}