Multiselect Checkbox dengan PHP-JQuery

January 6th, 2012 • Related • Filed Under

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 :

MultiSelect Checbox PHP JQuery

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

Post a Response