Menambahkan Teks ke Radio Button dengan JavaScript
Radio button adalah elemen HTML yang memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan. Biasanya, teks label digunakan untuk mengidentifikasi setiap opsi. Namun, terkadang Anda mungkin ingin menambahkan teks langsung ke dalam radio button itu sendiri.
Berikut cara menambahkan teks ke radio button dengan JavaScript:
Menggunakan Atribut value
Cara yang paling umum adalah dengan menggunakan atribut value dari elemen radio button. Atribut ini menyimpan nilai yang dikirim ke server saat formulir dikirim.
Dalam contoh ini, teks "Pilihan A", "Pilihan B", dan "Pilihan C" akan ditampilkan di dalam radio button.
Menggunakan JavaScript
Anda juga dapat menggunakan JavaScript untuk menambahkan teks ke radio button. Ini bisa dilakukan dengan mengubah atribut value atau dengan menambahkan konten ke elemen radio button menggunakan innerHTML.
Berikut contoh menggunakan innerHTML:
const radio1 = document.getElementById('radio1');
const radio2 = document.getElementById('radio2');
radio1.innerHTML = 'Pilihan A';
radio2.innerHTML = 'Pilihan B';
Kode ini akan menampilkan "Pilihan A" di dalam radio button pertama dan "Pilihan B" di dalam radio button kedua.
Catatan:
- Pastikan Anda menggunakan atribut
nameyang sama untuk semua radio button dalam kelompok. Ini memastikan bahwa hanya satu radio button yang dapat dipilih. - Menambahkan teks langsung ke dalam radio button dapat membuat antarmuka pengguna Anda terlihat aneh. Sebaiknya gunakan label teks terpisah untuk mengidentifikasi setiap opsi.
Dengan menggunakan metode ini, Anda dapat dengan mudah menambahkan teks ke radio button dan membuat antarmuka pengguna yang lebih informatif.