Bagaimana cara memilih beberapa tombol radio di html?

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggunakan JavaScript untuk memeriksa tombol radio mana dalam grup radio yang diperiksa

Pengantar Tombol Radio JavaScript

Tombol radio memungkinkan Anda untuk memilih hanya satu dari serangkaian opsi eksklusif yang telah ditentukan sebelumnya. Untuk membuat tombol radio, Anda menggunakan elemen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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 dengan tipe

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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. Sekelompok tombol radio disebut grup radio

Untuk membentuk grup radio, Anda menggunakan nama umum untuk semua tombol radio. Sebagai contoh

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

Code language: HTML, XML (xml)

Dalam contoh ini, semua tombol radio memiliki ukuran nama yang sama tetapi nilainya berbeda. Karena itu, Anda hanya dapat memilih satu tombol radio dalam satu waktu

Untuk menemukan tombol radio yang dipilih, Anda mengikuti langkah-langkah berikut

  • Pilih semua tombol radio dengan menggunakan metode DOM seperti metode

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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
  • Dapatkan properti

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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 dari tombol radio. Jika properti

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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 adalah

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

    Code language: JavaScript (javascript)
    0, tombol radio dicentang;

Untuk mengetahui tombol radio mana yang dicentang, gunakan atribut

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

Code language: JavaScript (javascript)
1. Sebagai contoh

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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)

Bagaimana itu bekerja

Pertama, pilih tombol dengan

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

Code language: JavaScript (javascript)
_2 id, output elemen dengan

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

Code language: JavaScript (javascript)
3 id, dan semua tombol radio dengan nama

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)
_

Kedua, daftarkan pendengar acara klik pada elemen tombol

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

Code language: PHP (php)

Ketiga, ulangi tombol radio dan dapatkan nilai tombol radio yang dipilih

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

Code language: JavaScript (javascript)

Jika tombol radio dicentang, properti

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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 adalah

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

Code language: JavaScript (javascript)
0. Kemudian, kami menetapkan

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

Code language: JavaScript (javascript)
_1 dari tombol radio yang dipilih ke variabel

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

Code language: JavaScript (javascript)
8

Karena hanya satu tombol radio dalam grup radio yang dapat diperiksa pada satu waktu, loop diakhiri segera dengan pernyataan

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

Code language: JavaScript (javascript)
9

Terakhir, atur pesan untuk elemen keluaran

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

Code language: JavaScript (javascript)

Acara perubahan tombol radio

Saat Anda mencentang atau menghapus centang pada tombol radio, itu mengaktifkan acara perubahan. Untuk mendengarkan acara perubahan, Anda menggunakan metode addEventListener() seperti ini

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

Code language: JavaScript (javascript)

Di dalam change event handler, Anda dapat mengakses kata kunci

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

Code language: PHP (php)
0 untuk mengakses tombol radio. Untuk memeriksa apakah tombol radio dicentang, Anda dapat menggunakan properti yang dicentang

if(this.checked) { // }

Code language: JavaScript (javascript)

Untuk mendapatkan nilai dari tombol yang dicentang, Anda menggunakan properti nilai

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

Code language: JavaScript (javascript)

Ini akan terlihat seperti ini

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

Code language: JavaScript (javascript)

Contoh berikut secara dinamis menghasilkan grup radio dan menampilkan nilai yang dipilih saat tombol radio dicentang

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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

Bagaimana itu bekerja

Pertama, tentukan larik string yang menampung ukuran. Dalam praktiknya, Anda mungkin mendapatkan nilai ini dari database di back-end atau dari hasil panggilan API

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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

Kedua, buat grup radio dari elemen array ukuran

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Radio Button</title> </head> <body> <p>Select your size:</p> <div> <input type="radio" name="size" value="XS" id="xs"> <label for="xs">XS</label> </div> <div> <input type="radio" name="size" value="S" id="s"> <label for="s">S</label> </div> <div> <input type="radio" name="size" value="M" id="m"> <label for="m">M</label> </div> <div> <input type="radio" name="size" value="L" id="l"> <label for="l">L</label> </div> <div> <input type="radio" name="size" value="XL" id="xl"> <label for="xl">XL</label> </div> <div> <input type="radio" name="size" value="XXL" id="xxl"> <label for="xxl">XXL</label> </div> <p> <button id="btn">Show Selected Value</button> </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

Dalam kode ini

1) Pilih elemen dengan id #group

2) Hasilkan grup radio menggunakan metode map() dengan templat literal;

Bagaimana cara memilih beberapa opsi di tombol radio di HTML?

Jika Anda perlu memilih satu opsi dari banyak opsi, kami memiliki tombol