❮ Đối tượng vô tuyến đầu vào
Ví dụ
Kiểm tra và bỏ chọn một nút radio cụ thể
kiểm tra chức năng() {
tài liệu. getElementById("đỏ"). đã kiểm tra = đúng;
}
hàm bỏ chọn() {
tài liệu. getElementById("đỏ"). đã chọn = sai;
}
Định nghĩa và cách sử dụng
Thuộc tính đã chọn đặt hoặc trả về trạng thái đã chọn của nút radio
Thuộc tính này phản ánh thuộc tính HTML đã kiểm tra
Hỗ trợ trình duyệt
Thuộc tính đã kiểm tra Có Có Có Có Cócú pháp
Trả lại tài sản đã kiểm tra
Đặt thuộc tính đã chọn
đối tượng đài phát thanh. đã kiểm tra = đúng. sai
Giá trị tài sản
Giá trịMô tảđúng. falseChỉ định có nên kiểm tra một nút radio hay không- đúng - Nút radio được chọn
- sai - Mặc định. Nút radio không được chọn
chi tiết kỹ thuật
Giá trị trả về. Boolean, trả về true nếu nút radio được chọn và false nếu nút radio không được chọnThêm ví dụ
Ví dụ
Tìm hiểu xem nút radio có được chọn hay không
var x = tài liệu. getElementById("myRadio"). đã kiểm tra;
Tự mình thử »Ví dụ
Sử dụng nút radio để chuyển văn bản trong trường nhập thành chữ hoa
tài liệu. getElementById("tên"). giá trị = tài liệu. getElementById("tên"). giá trị. Đến trường hợp trên();
Tự mình thử »Ví dụ
Một số nút radio trong một hình thức
var cà phê = tài liệu. biểu mẫu[0];
var txt = "";
var i;
for (i = 0; i < coffee. chiều dài; . đã chọn) {
if (coffee[i].checked) {
txt = txt + cà phê[i]. giá trị + " ";
}
}
tài liệu. getElementById("đơn hàng"). value = "Bạn đã gọi cà phê với. " + văn bản;
Trang liên quan
tài liệu tham khảo HTML. Thuộc tính được kiểm tra HTML
❮ Đối tượng vô tuyến đầu vàoCác nút radio có trong các nhóm được xác định bằng cách sử dụng cùng một thuộc tính checked or checked="" or checked="checked"0 trên tất cả các nút trong nhóm đó. Người dùng chỉ có thể chọn một nút radio từ một nhóm các nút radio. Khi một nút radio được chọn, bất kỳ nút radio nào khác có cùng tên (trong nhóm) đã được chọn trước đó sẽ không được chọn
Thuộc tính được kiểm tra
Ví dụ: sử dụng thuộc tính checked or checked="" or checked="checked"1 để chọn trước một nút radio
checked or checked="" or checked="checked"Mỗi trong số này là một kỹ thuật hợp lệ để xác định nút radio đã chọn
Ví dụ. kiểm tra trước một nút radio
Nút radio cuối cùng (Xanh lam) sẽ được chọn
<input type="radio" name="color" value="Red"> Red <input type="radio" name="color" value="Green"> Green <input checked type="radio" name="color" value="Blue"> BluePHP – Chọn trước các nút radio
<?php if (isset($_POST['groupname']) && $_POST['groupname'] == 'any value') { echo 'checked'; }Khi xử lý một biểu mẫu trong PHP, việc điền trước một nhóm các nút radio khá lộn xộn nhưng khá đơn giản. Chỉ cần so sánh giá trị trong checked or checked="" or checked="checked"2/checked or checked="" or checked="checked"3 với giá trị liên quan. Nếu phù hợp, hãy in ra checked or checked="" or checked="checked"1 để chọn trước nút radio đó, như được hiển thị trong mã
<?php $color = htmlspecialchars ($_POST['color'] ?? ''); ?> <form method="post" action="example.php"> <p>Radio Buttons:<br> <label> <input type="radio" name="color" value="Red" <?= $color == 'Red' ? 'checked' : '' ?>>Red </label> <label> <input type="radio" name="color" value="Blue" <?= $color == 'Blue' ? 'checked' : '' ?>>Blue </label> <label> <input type="radio" name="color" value="Green" <?= $color == 'Green' ? 'checked' : '' ?>>Green </label> </p> <p><input type="submit" name="submit" value="Submit"></p> </form>Sử dụng cookie để kiểm tra nút radio
Mã này có thể được mở rộng để nút radio được chọn trước khi người dùng trước đó đã lưu lựa chọn của mình trong cookie
Hộp kiểm và nút radio là thành phần giao diện người dùng được sử dụng rộng rãi được sử dụng để tạo biểu mẫu web. Các nút radio được sử dụng tốt nhất khi chúng tôi có danh sách hai hoặc nhiều hơn hai tùy chọn và người dùng phải chọn chính xác một tùy chọn
Trong hướng dẫn trước, chúng ta đã khám phá cách làm việc với Checkboxes và Select Dropdown bằng PHP
Tạo nút radio bằng HTML
Tạo một biểu mẫu đơn giản với các nút radio và thêm một số tên sê-ri phổ biến của Netflix làm giá trị nút radio
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Radio Buttons in PHP</title> </head> <body> <div class="container mt-5"> <form action="" method="post" class="mb-3"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things </label> <label> <input type="radio" name="radio" value="Ozark">Ozark </label> <input type="submit" name="submit" vlaue="Get Values"> </form> </div> </body> </html>Nhận giá trị đã chọn của nút radio trong PHP
Sử dụng $_POST[] để lấy giá trị của nút radio đã chọn. Nếu giá trị không được chọn, chúng tôi sẽ hiển thị thông báo cho người dùng chọn giá trị từ nhóm nút radio
<form action="" method="post"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things </label> <label> <input type="radio" name="radio" value="Ozark">Ozark </label> <input type="submit" name="submit" vlaue="Get Values"> </form> <?php if(isset($_POST['submit'])){ if(!empty($_POST['radio'])) { echo ' ' . $_POST['radio']; } else { echo 'Please select the value.'; } } ?>Tùy chỉnh nút radio bằng CSS
Đoạn mã dưới đây tạo bố cục để tùy chỉnh các nút radio bằng HTML
<form action="" method="post"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Ozark">Ozark <span class="select"></span> </label> <input type="submit" name="submit" vlaue="Get Values"> </form>Kiểu mặc định của trình duyệt tạo kiểu mặc định cho các nút radio, giờ đây, CSS theo sau sẽ ghi đè kiểu mặc định của trình duyệt và sẽ mang lại giao diện mới cho các nút radio của bạn
________số 8Có nhiều cách khác để thêm kiểu dáng tùy chỉnh trong các nút Radio, nhưng chúng tôi đã không nhờ sự trợ giúp của jQuery và tạo nút radio tùy chỉnh chỉ bằng CSS
Đây là mã cuối cùng cho các nút radio trong PHP với ví dụ
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Radio Buttons in PHP</title> <style> .container { max-width: 300px; margin: 50px auto; text-align: left; font-family: sans-serif; } select { width: 100%; min-height: 150px; margin-bottom: 20px; } input[type="submit"] { display: block; margin: 20px auto; } label { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 46px; margin-bottom: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label input { position: absolute; opacity: 0; cursor: pointer; } .select { top: 0; left: 0; height: 25px; width: 25px; position: absolute; border-radius: 50%; background-color: #cccccc; } label:hover input~.select { background-color: #ccc; } label input:checked~.select { background-color: #1A33FF; } .select:after { content: ""; position: absolute; display: none; } label input:checked~.select:after { display: block; } label .select:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } </style> </head> <body> <div class="container mt-5"> <form action="" method="post" class="mb-3"> <label> <input type="radio" name="radio" value="Lock & Key">Lock & Key <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Umbrella Academy">Umbrella Academy <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Stranger Things">Stranger Things <span class="select"></span> </label> <label> <input type="radio" name="radio" value="Ozark">Ozark <span class="select"></span> </label> <input type="submit" name="submit" vlaue="Get Values"> </form> <?php if(isset($_POST['submit'])){ if(!empty($_POST['radio'])) { echo ' ' . $_POST['radio']; } else { echo 'Please select the value.'; } } ?> </div> </body> </html>Phần kết luận
Cuối cùng, Radio Buttons trong hướng dẫn PHP đã kết thúc. Trong hướng dẫn này, chúng ta đã học cách truy xuất giá trị nút radio đã chọn và cách thêm kiểu dáng tùy chỉnh trong nút radio chỉ bằng CSS
máy đào
Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel
Twitter GitHubBài viết đề xuất
Xây dựng hệ thống xếp hạng 5 sao PHP MySQL bằng jQuery AJAXPHP 8 Tìm kiếm dữ liệu trực tiếp AJAX với MySQL Hướng dẫn PHP 8 Select2 Đa lựa chọn với jQuery AJAX Hướng dẫn PHP 8 Ví dụ về mã hóa và giải mã dữ liệu JSON Ví dụ về PHP 8 Hướng dẫn xác thực biểu mẫu phía máy chủ Tích hợp Google reCAPTCHA trong PHP 8 Biểu mẫu liên hệ Cách tạo Captcha