Bagaimana Cara Memilih Tombol Radio Secara Default?

Bagaimana Cara Memilih Tombol Radio Secara Default



Dalam bentuk HTML, tombol radio digunakan di mana pengembang perlu membatasi pengguna untuk memberikan atau memilih hanya satu opsi. Tujuan pengaturan tombol secara default adalah untuk memastikan bahwa pengguna harus memilih satu opsi karena memungkinkan pengguna untuk memilih hanya satu opsi. Blog ini menunjukkan petunjuk langkah demi langkah untuk memilih tombol radio secara default.

Bagaimana Cara Memilih Tombol Radio Secara Default?

Secara default “ diperiksa ” atribut digunakan untuk memilih tombol radio. Jika atribut ini digunakan pada beberapa tombol radio, maka tombol radio terbaru akan dipilih secara default. Ikuti blog langkah demi langkah untuk memilih tombol radio secara default:

Langkah 1: Buat Tombol Radio

Dalam file HTML, buat tiga tombol radio dan lampirkan label dengannya:







< tengah >

< h3 > Pilih tingkat pengalaman Anda: < / h3 >

< div >

< memasukkan jenis = 'radio' pengenal = 'pemula' nama = 'pengalaman' nilai = 'pemula' >

< label untuk = 'pemula' > Pemula < / label >

< / div >

< div >

< memasukkan jenis = 'radio' pengenal = 'intermediat' nama = 'pengalaman' nilai = 'intermediat' >

< label untuk = 'intermediat' > Intermediat < / label >

< / div >

< div >

< memasukkan jenis = 'radio' pengenal = 'maju' nama = 'pengalaman' nilai = 'maju' >

< label untuk = 'maju' > Maju < / label >

< / div >

< / tengah >

Dalam cuplikan kode di atas:



  • Tombol radio dibentuk dengan membuat sederhana “ ' tag dan atur jenisnya menjadi ' radio ”.
  • Tetapkan setiap tombol radio dengan 'nama', 'id', dan 'nilai'.
  • Pada akhirnya, gunakan ' pengenal ” dari kolom input untuk melampirkan “ ” tag menggunakan “ untuk ” atribut.

Setelah mengeksekusi skrip, hasilnya seperti di bawah ini:







Gambar menunjukkan bahwa tombol radio ditampilkan tetapi tidak ada yang dipilih secara default.

Langkah 2: Pilih Secara Default

diperiksa ” atribut digunakan untuk memilih tombol radio secara otomatis. Ini hanya memilih satu opsi. Itulah mengapa pendekatan yang lebih baik untuk memilih satu tombol radio secara default. Ini membatasi pengguna untuk memilih opsi yang tepat:



< div >

< memasukkan jenis = 'radio' pengenal = 'pemula' nama = 'pengalaman' nilai = 'pemula' diperiksa>

< label untuk = 'pemula' >Pemula< / label >

< / div >

Pada kode di atas, file diperiksa atribut digunakan dan ditugaskan ke kolom input pertama saja.

Sekarang setelah mengeksekusi halaman web kode di atas terlihat seperti ini:

Keluarannya mengilustrasikan bahwa tombol radio pertama dipilih secara default pada setiap penyegaran halaman.

Kiat Bonus: Menggunakan JavaScript untuk Memilih Tombol Radio secara Default

Untuk memilih tombol radio secara default menggunakan JavaScript, akses tombol radio menggunakan id. Kemudian, pilih atribut yang diperiksa dan setel nilai Boolean ke 'benar' seperti pada kode di bawah ini:

< naskah >

document.getElementById ( 'pemula' ) . diperiksa = BENAR;

< / naskah >

Dalam kode ini, “ pemula ” adalah id dari tombol radio yang dipilih secara default.

Setelah mengkompilasi skrip, hasilnya seperti di bawah ini:

Dalam snapshot di atas, tombol radio pertama dipilih secara default menggunakan JavaScript.

Kesimpulan

Untuk memilih tombol radio, pengguna dapat menggunakan tombol “ diperiksa ” atribut. Jika atribut yang diperiksa digunakan di lebih dari satu tombol radio, tombol radio tersebut mendapatkan nilai atribut 'diperiksa' terbaru. Untuk memilih tombol radio secara default menggunakan JavaScript, akses tombol radio menggunakan id. Blog ini telah berhasil mendemonstrasikan cara memilih tombol radio secara default.