Bài viết này trình bày mục đích, chức năng và cách sử dụng thuộc tính HTML DOM Input Radio “đã kiểm tra” trong JavaScript.
Thuộc tính HTML DOM Input Radio “đã kiểm tra” trong JavaScript là gì?
Thuộc tính “đã kiểm tra” của Đài phát thanh đầu vào hoạt động trên các biểu mẫu HTML và trường nhập liệu để đặt và kiểm tra trạng thái của nút “Radio”.
Cú pháp (Đặt thuộc tính đã kiểm tra)
radioObject. đã kiểm tra = ĐÚNG VẬY | SAITheo cú pháp trả về đã xác định, thuộc tính 'đã kiểm tra' hỗ trợ hai tham số được liệt kê bên dưới:
- ĐÚNG VẬY: Nó biểu thị rằng phần tử tương ứng đã được chọn.
- SAI: Nó chỉ ra rằng phần tử tương ứng không được chọn.
Cú pháp (Trả về thuộc tính đã kiểm tra)
radioObject. đã kiểm traTrong cú pháp trên, “ đối tượng đài phát thanh ” đề cập đến HTML “ <đầu vào> ” phần tử có loại là “radio”.
Hãy sử dụng các cú pháp được xác định ở trên để giải thích việc sử dụng thuộc tính HTML DOM Input Radio “đã kiểm tra” với sự trợ giúp của các ví dụ thực tế đã cho.
Ví dụ 1: Áp dụng thuộc tính “checked” của Radio đầu vào Sử dụng cú pháp cơ bản
Trong ví dụ đầu tiên, nút “Radio” được tạo để đặt thuộc tính “đã chọn” của nó bằng cách sử dụng cú pháp tổng quát đã xác định.
Mã HTML
Đầu tiên, hãy xem mã HTML đã nêu:
< phong cách cơ thể = 'căn chỉnh văn bản: trung tâm' >
< h2 > HTML Thuộc tính được kiểm tra đài phát thanh đầu vào DOM h2 >
Màu sắc : < kiểu đầu vào = 'Đài' nhận dạng = 'màu vàng' > Màu vàng < anh >< anh >
< nút onclick = 'kiểm tra màu()' > Kiểm tra 'màu vàng' cái nút >
< nút onclick = 'bỏ chọn màu ()' > Bỏ chọn 'màu vàng' cái nút >
Trong các dòng mã trên:
- Các ' ” thẻ xác định phần nội dung được căn chỉnh theo “ trung tâm ”.
- Các ' ” chỉ định tiêu đề phụ đầu tiên.
- Các ' <đầu vào> ” thẻ thêm nút “Radio” bằng cách chỉ định loại đầu vào “ Đài ” với id được chỉ định “ màu vàng ”.
- Các '
” thẻ thêm một nút đơn giản được liên kết với một “ trong một cái nhấp chuột ” sự kiện để thực thi “ colorCheck() ” chức năng sẽ được truy cập khi nhấp vào nút. - Tương tự, một “
” thẻ tạo một nút để gọi “ colorUncheck() ” chức năng khi bấm vào nút.
Mã JavaScript
Tiếp theo, hãy làm theo mã JavaScript đã cho:
< kịch bản >kiểm tra màu chức năng ( ) {
tài liệu. getElementById ( 'màu vàng' ) . đã kiểm tra = ĐÚNG VẬY ;
}
chức năng colorUncheck ( ) {
tài liệu. getElementById ( 'màu vàng' ) . đã kiểm tra = SAI ;
}
kịch bản >
Trong đoạn mã trên:
- Chức năng đầu tiên “ colorCheck() ” sử dụng “ tài liệu.getElementById() ” để tìm nạp nút radio, hãy liên kết “ đã kiểm tra ” thuộc tính và đặt giá trị của nó thành “true”.
- Mặt khác, chức năng “ colorUncheck() ” đặt giá trị của “ đã kiểm tra ” thành “false” đối với nút Radio đã truy cập.
đầu ra
Như đã thấy, đầu ra sẽ kiểm tra nút “Radio” khi nhấp vào nút (có tên là “Kiểm tra”) và bỏ chọn” khi nhấp vào nút (“Bỏ chọn”).
Ví dụ 2: Trả về giá trị “đã kiểm tra” của Radio đầu vào
Ví dụ này áp dụng thuộc tính “đã kiểm tra” của Radio đầu vào để trả về trạng thái của nút “Radio” được nhắm mục tiêu dưới dạng giá trị boolean.
Mã HTML
Hãy xem xét đoạn mã HTML sau:
< phong cách cơ thể = 'căn chỉnh văn bản: trung tâm' >< h2 > HTML Thuộc tính được kiểm tra đài phát thanh đầu vào DOM h2 >
Màu sắc : < kiểu đầu vào = 'Đài' đã kiểm tra = ĐÚNG VẬY nhận dạng = 'màu vàng' > Màu vàng < anh >< anh >
< nút onclick = 'kiểm tra màu()' > Kiểm tra 'màu vàng' cái nút >
< id = 'vật mẫu' >< P >
Trong khối mã trên, “ Đài ” được tạo và trạng thái của nút “ đã kiểm tra ” thuộc tính được đặt thành “ ĐÚNG VẬY ”. Sau đó, tương tự, chức năng đã nêu được gọi thông qua “đính kèm trong một cái nhấp chuột ” sự kiện với nút.
Mã JavaScript
Bây giờ, hãy xem xét các dòng mã sau:
< kịch bản >kiểm tra màu chức năng ( ) {
Ở đâu = tài liệu. getElementById ( 'màu vàng' ) . đã kiểm tra mặc định ;
tài liệu. getElementById ( 'vật mẫu' ) . bên trongHTML = t ;
}
kịch bản >
Trong đoạn mã trên:
- Định nghĩa một chức năng có tên là “ colorCheck() ”.
- Theo định nghĩa của nó, hãy áp dụng “ tài liệu.getElementById() ” để truy cập nút “Radio” bằng cách sử dụng id “màu vàng” và liên kết “ đã kiểm tra mặc định ” để kiểm tra giá trị mặc định của “ đã kiểm tra ' thuộc tính.
- Cuối cùng, áp dụng “ tài liệu.getElementById() ” để tìm nạp đoạn văn trống được bao gồm và hiển thị trạng thái của thuộc tính “đã kiểm tra”.
.
đầu ra
Như đã phân tích, kết quả trả về trạng thái của nút “Radio” đã cho, tức là, “ ĐÚNG VẬY ” khi nhấp vào nút.
Phần kết luận
Trong JavaScript, thuộc tính HTML DOM Input Radio “đã kiểm tra” rất hữu ích để đặt và trả về trạng thái đã kiểm tra của nút “Radio”. Cú pháp thiết lập của thuộc tính “đã kiểm tra” hoạt động trên hai giá trị “ ĐÚNG VẬY ' Và ' SAI ”. Mặt khác, cú pháp trả về của nó không yêu cầu bất kỳ tham số nào. Bài viết này đã trình bày mục tiêu, chức năng và cách sử dụng thuộc tính HTML DOM Input Radio “đã kiểm tra” trong JavaScript.