Select All dan Unselect All Checkbox dengan Javascript

Berawal dari komentar spam yang masuk tanpa di filter, sekarang saya mencari bagaimana untuk mencentang/uncentang checkbox atau radio select untuk selanjutnya dieksekusi (delete atau di approve).

Yah, memang cukup banyak Komentar Spam yang masuk akhir-akhir ini. Makanya kalau menghapus satu persatu, rasanya capek juga.

Berikut ini ada sedikit cara untuk merubah data yang lebih dari satu dengan menambahkan checkbox yang mempunyai nama yang sama dan diidentifikasi sebagai array. Contoh:

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

Mungkin untuk jumlah data yang sedikit, tidaklah sulit bagi Anda untuk mencentang atau uncentang data, tapi bagaimana kalau terdapat lebih dari 10 data ?. Tentu anda akan kerepotan. Untuk itu anda dapat melakukannya dengan menambahkan javascript yang berfungsi untuk mencentang atau uncentang seluruh data tersebut.

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

Selesai, dan hasilnya bisa kelihatan seperti dibawah ini nantinya: