Membuat Select All Checkbox dengan JavaScript

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 :)

30 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat