Membuat Select All Checkbox dengan JavaScript

30/03/2015    Aulia Rahmah Alhafidz    6497     Website

Saat membuat suatu aplikasi, entah berbasis web ataupun dekstop. Tak jarang dari kita yang melihat ada checkbox yang saat diklik akan secara otomatis akan menandai semua checkbox yang ada. Atau bukan di aplikasi saja, misalkan di suatu form. Kebanyakan orang menyebutnya Select All.

Kali ini kita akan coba mempelajari cara membuat Select All tersebut dengan menggunakan JavaScript. Tenang saja, scriptnya sangat singkat dan mudah dipahami.

Pertama kita buat dulu Checkboxnya, contohnya seperti ini  :

<input type="checkbox" onClick="toggle(this)" /> Select All<br/>

<input type="checkbox" name="kursus" value="Web Master"> Web Master<br/>
<input type="checkbox" name="kursus" value="Web Design"> Web Design<br/>
<input type="checkbox" name="kursus" value="Web Programming"> Web Programming<br/>
<input type="checkbox" name="kursus" value="Graphic Design"> Graphic Design<br/>
<input type="checkbox" name="kursus" value="Digital Marketing"> Digital Marketing<br/>
<input type="checkbox" name="kursus" value="Mobile App"> Mobile App<br/>
<input type="checkbox" name="kursus" value="CMS Master"> CMS Master<br/>
<input type="checkbox" name="kursus" value="Flash Animation"> Flash Animation<br/>
<input type="checkbox" name="kursus" value="Video Editing"> Video Editing<br/>

Lalu, kita buat script JavaScript untuk menjalankan syntax Select All :

Copy saja jika membutuhkannya.

Dan hasilnya akan menjadi seperti berikut ini :

Select All
Web Master
Web Design
Web Programming
Graphic Design
Digital Marketing
Mobile App
CMS Master
Flash Animation
Video Editing

Mudah kan? Semoga bermanfaat ya :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More