Multiselect Checkbox dengan PHP-JQuery
Banyak aplikasi web yang membutuhkan interaktif usernya untuk memilih pilihan yang lebih dari satu, seperti memilih item-item dari daftar list untuk kemudian dilakukan proses insert atau delete data, seperti aplikasi webmail ketika anda harus menghapus atau memindahkan email-email ke folder filter. Form dengan seperti ini membutuhkan kode javascript, dan solusi yang tepat untuk membuatnya adalah menggunakan menggunakan JQuery,
Misal tampilan Form multiselect pilihan juice favorit seperti ini :
Berikut kode program untuk menampilkan Form pilihan dengan menggunakan bahasa pemrograman PHP.
<BODY> <?php $ar_jus = array("Alpukat","Melon","Mangga","Durian","Terong Belanda","Tomat"); ?> <h2>Pilih Juice Favorit Anda</h2> <form method="POST" action="favorit_juice.php"> <table border="1" cellspacing="2" cellpadding="2"> <thead bgcolor="khaki"> <tr> <th><input type="checkbox" id="ceksemua"/></th> <th>Juice Favorit</th> </tr> </thead> <tbody> <?php foreach ($ar_jus as $jus) { echo '<tr>'; echo '<td width="20px"> <input type="checkbox" class="jus" name="jus[]" value="'.$jus.'"/> </td> <td>'.$jus.'</td>'; echo '</tr>'; } ?> </tbody> </table> <br/> <input type="submit" name="proses" value="Kirim"/> </form> </BODY>
Berikut kode program JQuery-nya yang diletakan dalam tag HEAD, sebelumnya jangan lupa untuk download file jquery.js di website jquery.com :
<SCRIPT language="javascript"> $(function(){ // create multiple select/deselect $("#ceksemua").click(function () { $('.jus').attr('checked', this.checked); }); // jika #ceksemua di pilih maka semua checkbox akan terpilih // demikian juga sebaliknya $(".jus").click(function(){ if($(".jus").length == $(".jus:checked").length) { $("#ceksemua").attr("checked", "checked"); } else { $("#ceksemua").removeAttr("checked"); } }); }); </SCRIPT>
Berikut ini kode program untuk menangkap file hasil pilihan pada form pilihan juice favorit
Juice Favorit Anda : <?php $ar_juspilih = $ _POST['jus']; $nomor = 1; foreach ( $ar_juspilih as $jus) { echo '<br/>'.$nomor. ')'. $jus; $nomor++; } ?>
Selamat Mencoba !!!