Home » Javascript » Checkbox; Select All dan Unselect All Checkbox dengan Javascript

Checkbox; Select All dan Unselect All Checkbox dengan Javascript


Bagaimanakah caranya untuk mencentang (select) checkbox atau radio untuk selanjutnya dieksekusi (input/delete) sebuah kondisi atau inputan?. Itu bisa dilakukan dengan javascript dibawah ini.

Biasanya digunakan untuk menghapus beberapa list sekaligus (semisal komentar spam) agar tidak menceklist-nya satu persatu. Cukup dengan sekali ceklist, otomatis semua list ikut terceklist.

Cara dibawah ini merupakan cara untuk merubah data lebih dari satu dengan menambahkan checkbox yang mempunyai nama (name) yang sama dan diidentifikasi sebagai sebuah array.

<form name="form_data">
<input type="checkbox" name="deleted_items[]" value="1" />ID 1<br />
<input type="checkbox" name="deleted_items[]" value="2" />ID 2<br />
<input type="checkbox" name="deleted_items[]" value="3" />ID 3
</form>

Jikalau jumlah data yang di list sedikit, mungkin tidak menyulitkan untuk mencentang atau uncentang. Tapi bayangkan jikalau terdapat lebih dari 10 data ? atau 100 data?. Tentu hal ini akan sangat merepotkan bukan?

Untuk hal itu anda cukup melakukannya dengan menambahkan javascript yang berfungsi untuk mencentang atau uncentang seluruh list tersebut. Berikut ini kode javascript-nya.

<script type="text/javascript">
function check_all(val) {
// Ganti nilai form_data sesuai dengan nama form dan deleted_items[] sesuai dengan nama checkbox
var checkbox = document.form_data.elements['deleted_items[]'];
if ( checkbox.length > 0 ) {
for (i = 0; i < checkbox.length; i++) {
if ( val.checked ) {
checkbox[i].checked = true;
}
else {
checkbox[i].checked = false;
}
}
}
else {
if ( val.checked ) {
checkbox.checked = true;
}
else {
checkbox.checked = false;
}
}
}
</script>

Kemudian tambahkan sebuah checkbox utama yang berfungsi untuk memanggil fungsi di atas. Sehigga form menjadi :

<form name="form_data">
<input type="checkbox" onclick="check_all(this)" />Select All/Unselect All<br />
<input type="checkbox" name="deleted_items[]" value="1" />ID 1<br />
<input type="checkbox" name="deleted_items[]" value="2" />ID 2<br />
<input type="checkbox" name="deleted_items[]" value="3" />ID 3
</form>

Nah, demikian saja, Anda tentunya sudah bisa mencobanya sendiri. Semoga tulisan ini bermanfaat untuk Anda yang masih belajar dan mencari referensi tentang Select All dan Unselect All Checkbox dengan Javascript.

Terima kasih, semoga bermanfaat ya.

Berita Terbaru