Check all checkbox dengan jquery

Melanjutkan artikel sebelumnya Checked on table cell dengan jquery kali ini kita akan membuat agar checkbox dapat tercentang seluruhnya dengan sekali klik, inti teknik yang akan kita buat hampir sama dengan teknik – teknik yang lain cuman ada sedikit perbaikan agar kode yang akan kita buat sedikit lebih pendek. Gunanya apa sih check all itu? sebenarnya banyak, kalo kalian menggunakan Grid table check all akan sangat membantu kalian, untuk menghapus bagian yang tercentang.

OK kita buat 1 file html

<html>
    <head>
        <title>Check all</title>
        <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>       
    </head>
    <body>
        <table cellpadding=”2″ cellspacing=”2″>
            <thead>
                <tr>
                    <th><input type=”checkbox” id=”checkall” value=”” /></th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Alamat</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type=”checkbox” id=”check1″ value=”1″ /></td>
                    <td>Nama saya1</td>
                    <td>Email.saya@yahoo.com</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td><input type=”checkbox” id=”check2″ value=”2″ /></td>
                    <td>Nama saya2</td>
                    <td>Email.saya2@yahoo.com</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td><input type=”checkbox” id=”check3″ value=”3″ /></td>
                    <td>Nama saya3</td>
                    <td>Email.saya3@yahoo.com</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

file diatas kita sedikit miripkan dengan grid table kalian dapat modifikasi sesuai dengan keinginan kalian, tentu file diatas masih belum dapat melakukan checkall karena kita belum memberikan Event untuk checkall. Jika kalian lebih teliti tedapat source script javascript yang mengarah ke google, yup benar jquery saya ambil langsung dari google dimana kalian harus terkoneksi internet agar dapat menjalankan event checkall atau kalian dapat mendownload jquery script secara manual.

ok sekarang kita tambahkan event checkall

<script type=”text/javascript”>
$(function(){
    $(“#checkall”).’click(function(){ //
        var status=this.checked;
        $(“:checkbox”).each(function(){
            this.checked = status;
        });
    });
});
</script>

cukup simple bukan codenya… hanya beberapa baris saja, inputkan script diatas dibawah jquery framework atau masih didalam tag head.

OK segitu dulu semoga bermanfaat.

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Cara root Nokia X Nokia X2 Nokia X2 Dual Sim Nokia XL

Ikuti caranya dengan seksama :-> Langkah pertama Buka Nokia X kalian-> Selanjutnya buka “PENGATURAN” jika polsel Nokia …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!