Tombol radio adalah ikon yang digunakan dalam formulir untuk menerima masukan dari pengguna. Ini memungkinkan pengguna untuk memilih satu nilai dari grup tombol radio. Tombol radio pada dasarnya digunakan untuk pemilihan tunggal dari banyak pilihan, yang sebagian besar digunakan dalam bentuk GUI
Anda dapat menandai/memeriksa hanya satu tombol radio di antara dua tombol radio atau lebih. Dalam bab ini, kami akan memandu Anda tentang cara memeriksa radio button menggunakan bahasa pemrograman JavaScript
Untuk ini, pertama kita mendesain form yang berisi tombol radio menggunakan HTML, dan kemudian kita akan menggunakan pemrograman JavaScript untuk memeriksa tombol radio. Kami juga akan memeriksa nilai tombol radio mana yang dipilih
Buat tombol radio
Berikut adalah kode sederhana untuk membuat grup tombol radio
Salin Kode
Uji SekarangPeriksa tombol radio
Kami tidak perlu menulis kode khusus apa pun untuk memeriksa tombol radio. Mereka dapat diperiksa setelah dibuat atau ditentukan dalam bentuk HTML
Namun, kita harus menulis kode JavaScript untuk mendapatkan nilai dari tombol radio yang dicentang, yang akan kita lihat pada bab di bawah ini
Periksa tombol radio dipilih atau tidak
Ada dua cara dalam JavaScript untuk memeriksa tombol radio yang ditandai atau untuk mengidentifikasi tombol radio mana yang dipilih. JavaScript menawarkan dua metode DOM untuk ini
Properti masukan radio yang diperiksa digunakan untuk memeriksa apakah kotak centang dipilih atau tidak. Gunakan dokumen. getElementById('id'). metode yang diperiksa untuk ini. Ini akan mengembalikan status tombol radio yang diperiksa sebagai nilai Boolean. Itu bisa benar atau salah
Benar - Jika tombol radio dipilih
Salah - Jika tombol radio tidak dipilih/dicentang
Lihat kode JavaScript di bawah ini untuk mengetahui cara kerjanya
Contoh
Misalnya, kami memiliki tombol radio bernama Musim Panas dan id = 'musim panas'. Sekarang, kami akan memeriksa menggunakan id tombol ini apakah tombol radio ditandai atau tidak
Salin Kode
querySelector()
Fungsi querySelector() adalah metode DOM JavaScript. Metode ini digunakan untuk mendapatkan elemen yang cocok dengan pemilih CSS yang ditentukan dalam dokumen. Ingat Anda perlu menentukan properti nama tombol radio dalam kode HTML
Untuk tombol radio, isi properti nilai tidak muncul di antarmuka pengguna. Properti value hanya memiliki arti saat mengirimkan formulir. Jika tombol radio dalam keadaan dicentang saat formulir dikirimkan, nama tombol radio dikirim bersama dengan nilai dari properti value (jika tombol radio tidak dicentang, tidak ada informasi yang dikirim)
Tip. Tetapkan nilai yang berbeda untuk tombol radio di grup yang sama, untuk mengidentifikasi (di sisi server) mana yang diperiksa
Dukungan Peramban
Nilai PropertiYaYaYaYaYaSintaksis
Kembalikan properti nilai
Tetapkan properti nilai
Nilai properti
ValueDescriptiontextMenentukan nilai yang terkait dengan input (ini juga merupakan nilai yang dikirim saat dikirim)Detail Teknis
Nilai Pengembalian. Sebuah String, mewakili nilai atribut value dari tombol radioLebih Banyak Contoh
Contoh
Ubah nilai atribut value dari tombol radio
dokumen. getElementById("Radiosaya"). nilai = "newRadioBtnValue";
Cobalah sendiri "Contoh
Menggunakan tombol radio bersama dengan kolom input teks untuk menampilkan nilai tombol radio yang dipilih
Ringkasan. dalam tutorial ini, Anda akan belajar cara membuat formulir dengan tombol radio dan menangani grup radio di PHP
Pengantar tombol radio
Untuk membuat tombol radio, Anda menggunakan elemen
<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)8 dengan tipe<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)9. Sebagai contoh<input type="radio" name="contact" id="contact_email" value="email" />
Code language: HTML, XML (xml)Tombol radio tidak memiliki label. Oleh karena itu, Anda harus selalu menggunakan tombol radio dengan elemen
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)0 seperti ini<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Untuk mengaitkan tombol radio dengan elemen
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)_0, nilai atribut<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)2 label harus sama dengan nilai<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)3 tombol radioTombol radio memiliki dua status. dicentang dan tidak dicentang
Saat Anda menautkan label dengan tombol radio, Anda dapat memeriksa tombol radio dengan mengeklik label atau tombol radio itu sendiri. Oleh karena itu, label meningkatkan kegunaan tombol radio karena memperluas area pemilihan
Sebagai alternatif, Anda dapat menempatkan tombol radio di dalam elemen
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)0 seperti ini<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)Dalam hal ini, radio menautkan ke label tanpa mencocokkan atribut for dan id
Untuk memilih tombol radio secara otomatis saat halaman dimuat pertama kali, Anda dapat menggunakan atribut Boolean
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)5<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)Tentukan grup radio
Dalam praktiknya, Anda sering menggunakan tombol radio dalam grup. Sekelompok tombol radio disebut grup radio. Grup radio memungkinkan Anda untuk memilih hanya satu tombol radio dalam satu waktu
Jika Anda memilih tombol radio apa pun dalam grup, tombol radio yang saat ini dipilih dalam grup yang sama akan dibatalkan pilihannya secara otomatis
Untuk menentukan grup radio, Anda menetapkan nama yang sama untuk semua tombol radio di grup yang sama
Contoh berikut mendefinisikan grup radio yang terdiri dari dua tombol radio
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)Tangani tombol radio di PHP
Ketika formulir memiliki tombol radio dengan nama, Anda bisa mendapatkan tombol radio yang diperiksa dengan mengakses larik
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)6 atau<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)7, tergantung pada metode permintaanJika tombol radio tidak dicentang,
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)6 atau<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)7 tidak berisi kunci tombol radio. Oleh karena itu, Anda perlu menggunakan fungsi<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_0 untuk memeriksa apakah tombol radio dicentang atau tidakisset($_POST['radio_name'])
Code language: PHP (php)Sebagai alternatif, Anda dapat menggunakan fungsi
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_1filter_has_var(INPUT_POST, 'radio_name')
Code language: JavaScript (javascript)<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_2 mengembalikan<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)4Jika tombol radio dicentang, Anda mendapatkan nilai tombol radio dari
<label> <input type="radio" name="contact_email" value="email"> Email </label>
Code language: HTML, XML (xml)6 menggunakan nama tombol radio$_POST['radio_name']
Code language: PHP (php)Contoh tombol radio PHP
Kami akan membuat formulir sederhana dengan grup radio. Jika Anda tidak memilih opsi apa pun dan mengirimkan formulir, itu akan menampilkan pesan kesalahan. Jika tidak, itu akan menunjukkan nilai tombol radio yang dipilih
Pertama, buat direktori dan struktur file berikut
. ├── css | └── style.css ├── inc | ├── footer.php | ├── get.php | ├── header.php | └── post.php └── index.php
Code language: plaintext (plaintext)FileDirectoryDescriptionindex. php. Berisi logika utama yang didapat beban. php atau posting. php tergantung pada header metode permintaan HTTP. phpincBerisi headerfooter HTML. phpincBerisi footerget HTML. phpincContain kode untuk menampilkan formulir dengan tombol radio saat permintaan HTTP adalah GET. pos. phpincBerisi kode untuk menangani gaya permintaan POST. csscssBerisi kode CSSKedua, tambahkan kode berikut ke file
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)6<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PHP Radio Button</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <main>
Code language: HTML, XML (xml)Ketiga, tambahkan kode berikut ke file
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)7<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)0Keempat, tambahkan kode berikut ke file
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)8<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_1Bagaimana itu bekerja
Array
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_9 digunakan untuk menghasilkan tombol radio secara dinamis. Dalam aplikasi nyata, data dapat berasal dari tabel database atau hasil panggilan APILarik
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)_0 digunakan untuk mengumpulkan pesan kesalahanUntuk mendapatkan metode permintaan HTTP, Anda mengakses kunci
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)1 dari array<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)2. Fungsi<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)_3 mengubah metode permintaan menjadi huruf besar<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_2File
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_8 memuat<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)5 dari direktori<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)8 memuat<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)8 dari direktori<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)6<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_3Kelima, buat formulir di file
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)5<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_4Kode berikut menggunakan pernyataan
isset($_POST['radio_name'])
Code language: PHP (php)_1 untuk menghasilkan grup radio dari larik<input type="radio" name="contact" id="contact_email" value="email" checked /> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)9<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)5Kode berikut menunjukkan pesan kesalahan dari array
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)0. Perhatikan bahwa kami menggunakan operator penggabungan nol (??) yang tersedia di PHP 7+Ekspresi
isset($_POST['radio_name'])
Code language: PHP (php)4 mengembalikanisset($_POST['radio_name'])
Code language: PHP (php)5 jika ada dan bukan null atau ” sebaliknya<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_6Terakhir, tambahkan kode yang menangani permintaan POST
<input type="radio" name="contact" id="contact_email" value="email"/> <label for="contact_email">Email</label>
Code language: HTML, XML (xml)_7Bagaimana
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)_8 bekerjaFungsi
isset($_POST['radio_name'])
Code language: PHP (php)_7 membersihkan nilai tombol radio yang dicentang. Untuk memastikan nilai yang dikirimkan valid, kami memeriksanya dengan kunci arrayisset($_POST['radio_name'])
Code language: PHP (php)8 menggunakan fungsiisset($_POST['radio_name'])
Code language: PHP (php)9Jika nilai yang dikirimkan cocok dengan salah satu kunci array, kami menampilkan pesan. Jika tidak, kami menambahkan pesan kesalahan ke larik
<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)0Dalam pernyataan
filter_has_var(INPUT_POST, 'radio_name')
Code language: JavaScript (javascript)1 terakhir, kami memuat formulir (<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)5) yang menunjukkan pesan kesalahan jika array<input type="radio" name="contact" id="contact_email" value="email" /> <label for="contact_email">Email</label> <input type="radio" name="contact" id="contact_phone" value="phone" /> <label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)0 tidak kosong. Jika tidak, kami menampilkan pesan konfirmasi