Thuộc tính tên radio Đầu vào HTML DOM được sử dụng để thiết lập hoặc trả về thuộc tính tên của trường radio đầu vào. Thuộc tính name giúp xác định dữ liệu biểu mẫu sau khi nó đã được gửi đến máy chủ. JavaScript cũng có thể sử dụng thuộc tính name để tham chiếu đến các phần tử biểu mẫu để thao tác sau này.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính tên.
radioObject.name = name
Ở đây, tên dùng để chỉ định tên nút radio.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính tên radio -
<!DOCTYPE html>
<html>
<body>
<h1>Input radio name Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>
<p>Change the name of the above radio button by clicking the below button</p>
<button type=”button” onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("Orange").name ="colors" ;
document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI TÊN -
Trong ví dụ trên -
Đầu 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 có type =”radio”, name =”results”, id =”Orange” -
<form> FRUIT: <input type="radio" name="fruits" id="Orange">Orange </form>
Sau đó, chúng tôi tạo nút THAY ĐỔI TÊN sẽ thực thi phương thức changeName () khi người dùng nhấp vào -
<button type=”button” onclick="changeName()">CHANGE NAME</button>
Phương thức changeName () sử dụng phương thức getElementById () để lấy trường đầu vào có kiểu radio và đặt giá trị thuộc tính tên của nó thành “màu sắc”. Sau đó, sự thay đổi này được phản ánh trong một đoạn văn có id là "Sample" và sử dụng thuộc tính innerHTML của nó để hiển thị văn bản dự định -
function changeName() {
document.getElementById("Orange").name ="colors" ;
document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}