Để chuẩn bị hoặc OnReady, bạn nên gán giá trị của nút radio mặc định đó cho biến mà bạn đang sử dụng. Một cách khác là gán giá trị đó làm giá trị mặc định của biến
Vui lòng xem các bất động sản dưới đây
Tôi phải tạo một bộ tùy chọn làm nút radio. Tuy nhiên, ở đây, tôi không muốn bất kỳ nút radio nào được chọn khi màn hình được khởi chạy lần đầu tiên. Đó là, không có nút radio mặc định nào được chọn
Xin vui lòng cho tôi biết làm thế nào để làm điều này
Cảm ơn rất nhiều trước
Phần thưởng được đảm bảo
Trân trọng,
Tush
Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để kiểm tra nút radio nào trong nhóm radio được chọn
Giới thiệu về nút radio JavaScript
Các nút radio cho phép bạn chỉ chọn một trong số các tùy chọn loại trừ lẫn nhau được xác định trước. Để tạo nút radio, bạn sử dụng phần tử
5 với kiểuCode language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
6. Một nhóm các nút radio được gọi là một nhóm radioCode language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
Để tạo một nhóm radio, bạn sử dụng một tên chung cho tất cả các nút radio. Ví dụ
Code language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL
Trong ví dụ này, tất cả các nút radio có cùng kích thước tên nhưng giá trị khác nhau. Do đó, bạn chỉ có thể chọn một nút radio tại một thời điểm
Để tìm nút radio đã chọn, bạn làm theo các bước sau
- Chọn tất cả các nút radio bằng cách sử dụng phương pháp DOM chẳng hạn như phương pháp
7
Code language: HTML, XML [xml]JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
- Lấy thuộc tính
8 của nút radio. Nếu thuộc tính
Code language: HTML, XML [xml]JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
8 là
Code language: HTML, XML [xml]JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
0, nút radio được chọn;
Code language: JavaScript [javascript]const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Để biết nút radio nào được chọn, bạn sử dụng thuộc tính
1. Ví dụCode language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Code language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
Làm thế nào nó hoạt động
Đầu tiên, chọn nút có id
2, phần tử đầu ra có idCode language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
3 và tất cả các nút radio có tênCode language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
4Code language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Code language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Thứ hai, đăng ký trình xử lý sự kiện nhấp chuột trên phần tử nút
Code language: PHP [php]
btn.addEventListener['click', [] => { }];
Thứ ba, lặp lại các nút radio và nhận giá trị của nút radio đã chọn
Code language: JavaScript [javascript]
let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } }
Nếu một nút radio được chọn, thuộc tính
8 của nó làCode language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
0. Sau đó, chúng tôi gánCode language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
1 của nút radio đã chọn cho biếnCode language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
8Code language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Vì chỉ có thể kiểm tra một nút radio trong một nhóm radio tại một thời điểm, nên vòng lặp được kết thúc ngay lập tức bằng câu lệnh
9Code language: JavaScript [javascript]
const btn = document.querySelector['#btn']; const output = document.querySelector['#output']; const radioButtons = document.querySelectorAll['input[name="size"]'];
Cuối cùng, đặt thông báo cho phần tử đầu ra
Code language: JavaScript [javascript]
output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;
Sự kiện thay đổi của nút radio
Khi bạn chọn hoặc bỏ chọn một nút radio, nó sẽ kích hoạt sự kiện thay đổi. Để lắng nghe sự kiện thay đổi, bạn sử dụng phương thức addEventListener[] như thế này
Code language: JavaScript [javascript]
radioButton.addEventListener['change',function[e]{ }];
Bên trong trình xử lý sự kiện thay đổi, bạn có thể truy cập từ khóa
0 để truy cập nút radio. Để kiểm tra xem nút radio có được chọn hay không, bạn có thể sử dụng thuộc tính đã chọnCode language: PHP [php]
btn.addEventListener['click', [] => { }];
if[this.checked] { // }
Code language: JavaScript [javascript]
Để lấy giá trị của nút đã chọn, bạn sử dụng thuộc tính giá trị
Code language: JavaScript [javascript]
if[this.checked] { console.log[this.value]; }
Nó sẽ trông như thế này
Code language: JavaScript [javascript]
radioButton.addEventListener['change', function [e] { if [this.checked] { console.log[this.value]; } }];
Ví dụ sau đây tự động tạo nhóm radio và hiển thị giá trị đã chọn khi nút radio được chọn
0Code language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
Làm thế nào nó hoạt động
Đầu tiên, xác định một mảng các chuỗi giữ kích thước. Trên thực tế, bạn có thể lấy các giá trị này từ cơ sở dữ liệu ở back-end hoặc từ kết quả của lệnh gọi API
1Code language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
Thứ hai, tạo các nhóm radio từ các phần tử của mảng kích thước
2Code language: HTML, XML [xml]
JavaScript Radio Button Select your size: XS S M L XL XXL Show Selected Value const btn = document.querySelector['#btn']; const radioButtons = document.querySelectorAll['input[name="size"]']; btn.addEventListener["click", [] => { let selectedSize; for [const radioButton of radioButtons] { if [radioButton.checked] { selectedSize = radioButton.value; break; } } // show the output: output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`; }];
Trong mã này
1] Chọn phần tử có id #group
2] Tạo một nhóm radio bằng phương thức map[] với mẫu chữ;