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 radioUntuk 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 adalahconst 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 denganconst 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 namaconst btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');
Code language: JavaScript (javascript)4const 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>
const btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');
Code language: JavaScript (javascript)0. Kemudian, kami menetapkanconst 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 variabelconst btn = document.querySelector('#btn'); const output = document.querySelector('#output'); const radioButtons = document.querySelectorAll('input[name="size"]');
Code language: JavaScript (javascript)8Karena 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)9Terakhir, 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 dicentangif(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)0Bagaimana 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)_1Kedua, 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)_2Dalam kode ini
1) Pilih elemen dengan id #group
2) Hasilkan grup radio menggunakan metode map() dengan templat literal;