Nút radio HTML được kiểm tra theo mặc định

Để 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ử

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
5 với kiểu

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
6. Một nhóm các nút radio được gọi là một nhóm radio

Để 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ụ

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> body> html>

Code language: HTML, XML (xml)

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

    html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

    Code language: HTML, XML (xml)
    7
  • Lấy thuộc tính

    html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

    Code language: HTML, XML (xml)
    8 của nút radio. Nếu thuộc tính

    html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

    Code language: HTML, XML (xml)
    8 là

    const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

    Code language: JavaScript (javascript)
    0, nút radio được chọn;

Để biết nút radio nào được chọn, bạn sử dụng thuộc tính

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
1. Ví dụ

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)

Làm thế nào nó hoạt động

Đầu tiên, chọn nút có id

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
2, phần tử đầu ra có id

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
3 và tất cả các nút radio có tên

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
4

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)

Thứ hai, đăng ký trình xử lý sự kiện nhấp chuột trên phần tử nút

btn.addEventListener('click', () => { });

Code language: PHP (php)

Thứ ba, lặp lại các nút radio và nhận giá trị của nút radio đã chọn

let selectedSize; for (const radioButton of radioButtons) { if (radioButton.checked) { selectedSize = radioButton.value; break; } }

Code language: JavaScript (javascript)

Nếu một nút radio được chọn, thuộc tính

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
8 của nó là

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
0. Sau đó, chúng tôi gán

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
1 của nút radio đã chọn cho biến

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
8

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

const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');

Code language: JavaScript (javascript)
9

Cuối cùng, đặt thông báo cho phần tử đầu ra

output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;

Code language: JavaScript (javascript)

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

radioButton.addEventListener('change',function(e){ });

Code language: JavaScript (javascript)

Bên trong trình xử lý sự kiện thay đổi, bạn có thể truy cập từ khóa

btn.addEventListener('click', () => { });

Code language: PHP (php)
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ọn

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ị

if(this.checked) { console.log(this.value); }

Code language: JavaScript (javascript)

Nó sẽ trông như thế này

radioButton.addEventListener('change', function (e) { if (this.checked) { console.log(this.value); } });

Code language: JavaScript (javascript)

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

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
0

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

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
1

Thứ hai, tạo các nhóm radio từ các phần tử của mảng kích thước

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Buttontitle> head> <body> <p>Select your size:p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XSlabel> div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">Slabel> div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">Mlabel> div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">Llabel> div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XLlabel> div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXLlabel> div> <p> <button id="btn">Show Selected Valuebutton> p> <p id="output">p> <script> 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`; }); script> body> html>

Code language: HTML, XML (xml)
2

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ữ;

Các nút radio có lựa chọn mặc định không?

Luôn cung cấp lựa chọn mặc định Trong trường hợp nút radio điều này có nghĩa là nút radio phải luôn được chọn trước chính xác một tùy chọn. Chọn tùy chọn an toàn và bảo mật nhất (để tránh mất dữ liệu).

Làm cách nào để kiểm tra nút radio đã chọn trong HTML?

Thuộc tính đã kiểm tra Radio đầu vào .
Kiểm tra và bỏ chọn một nút radio cụ thể. Kiểm tra chức năng() {.
Tìm hiểu xem nút radio có được chọn hay không. getElementById("myRadio"). .
Sử dụng nút radio để chuyển văn bản trong trường nhập thành chữ hoa. getElementById("tên"). .
Một số nút radio trong một hình thức. cà phê var = tài liệu

Làm cách nào để đặt nút radio thành kiểm tra theo mặc định trong JavaScript?