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

Thuộc tính name của HTML DOM Input Radio được sử dụng để thiết lập hoặc trả về thuộc tính name của trường radio. Thuộc tính name giúp xác định dữ liệu form sau khi đã submit lên server. JavaScript cũng có thể dùng thuộc tính name để tham chiếu các phần tử form để thao tác sau này.

Cú pháp

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

radioObject.name = name

Ở đây, name dùng để chỉ định tên cho nút radio.

Ví dụ

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

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính name của Input Radio</h1> 
<form id="FORM1"> 
TRÁI CÂY: <input type="radio" name="fruits" id="Orange">Cam </form> 
<p>Thay đổi tên của nút radio trên bằng cách nhấn nút dưới đây</p> 
<button type="button" onclick="changeName()">ĐỔI TÊN</button> 
<p id="Sample"></p> 
<script> 
    function changeName() { 
        document.getElementById("Orange").name ="colors" ; 
        document.getElementById("Sample").innerHTML = "Tên nút radio hiện là colors"; 
    } 
</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 ĐỔI TÊN:

Trong ví dụ trên:

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

<form> TRÁI CÂY: <input type="radio" name="fruits" id="Orange">Cam </form>

Tạo nút ĐỔI TÊN thực thi phương thức changeName() khi được nhấn:

<button type="button" onclick="changeName()">ĐỔI TÊN</button>

Phương thức changeName() dùng getElementById() để lấy trường radio và thiết lập thuộc tính name thành "colors". Thay đổi này phản ánh trong đoạn văn id="Sample" qua innerHTML:

function changeName() { 
    document.getElementById("Orange").name ="colors" ; 
    document.getElementById("Sample").innerHTML = "Tên nút radio hiện là colors"; 
}