Tutorial AJAX PHP

Select All Record & Unselect All Record Menggunakan AJAX PHP

Ajax PHP - Select All Record & Unselect All Record Menggunakan Ajax PHP

Tutorial Ajax PHP - Select All Record & Unselect All Record Menggunakan Ajax PHP ini akan membahas bagaimana caranya memilih (selected) semua record dengan ceklist checkbox sehingga semua record (Baris) dapat dipilih. Develindo

Tutorial ini membahas memilih semua record dengan mengkilik tombol tandai semua dan membatalkan pilihan dengan mengklik hapus tanda.

Berikut langkah-langkahnya.

Buat satu folder di folder htdoc anda, (Nama sesuai keinginan)

Buat database dengan nama praktek dan buat tabel dengan nama tb_siswa

 

Selanjutnya buat file koneksi.php

Koneksi.php
 

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');

//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
 or die('Koneksi Ke database Error'); //mengkoneksikan dengan server 
jika tidak akan muncul pesan error
mysql_select_db($database) or 
die('Database Tidak Ditemukan');   //mengkoneksikan dengan database jika
 tidak akan muncul pesan database tidak ada

?>


index.php
 

 <!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | Ajax PHP - Select All Record & Unselect All Record Menggunakan Ajax PHP</title>
           <!-- Bootstrap core CSS -->
           <link href="css/bootstrap.css" rel="stylesheet">
           <!-- Bootstrap core JavaScript-->
           <script src="js/jquery.min.js"></script>
           <script src="js/bootstrap.js"></script>

      </head>
      <body>
           <br /><br />
           <div class="container" style="width:800px;">
                <h2 align="center">Ajax PHP - Select All Record & Unselect All Record Menggunakan Ajax PHP</h2>
                <h3 align="center">Data Seluruh Siswa</h3>
                <br /><br />
                <a href="#" class="btn btn-primary selectall">Tandai Semua</a>
                <a href="#" class="btn btn-primary unselectall">Hapus Tanda</a>

                <br>
                <div id="tabel_siswa">
                <div class="table-responsive">
                     <table class="table table-bordered">
                     <thead>
                          <tr>
                               <th><input type="checkbox" value=""></th>
                               <th>NIS</th>
                               <th>NISN</th>
                               <th>Nama Lengkap</th>
                               <th>Gender</th>
                          </tr>
                          </thead>
                          <tbody>
                          <?php
                          //panggil fungsi koneksi.php
                          include "koneksi.php";
                          //ambil data dari tb_siswa dan lakukan perulangan dengan while
                          $ambildata=mysql_query("select*from tb_siswa order by id_siswa");
                          while($a = mysql_fetch_array($ambildata))
                          {
                          ?>
                          <tr>
                              
 <td><input type="checkbox" id="<?php echo $a['nama_siswa'];
 ?>" name="checkbox" value="<?php echo $a["id_siswa"];?>" 
/></td>
                               <td>
                               <strong><?php echo $a['id_siswa']; ?></strong>
                               </td>
                               <td><?php echo $a['nisn'];?></td>
                               <td><?php echo $a['nama_siswa'];?></td>
                               <td><?php echo $a['gender_siswa'];?></td>
                          </tr>
                          <?php
                          }
                          ?>
                          <tbody>
                     </table>
                </div>
                </div>
           </div>
      </body>
 </html>
<script>
$(document).ready(function () {

//button select all

    $(document).on('click', '.selectall', function (event) {
        $('.table input:checkbox').prop('checked', true);
        $('.table tbody tr').addClass('text-success');

    });

    //button unselectall

    $(document).on('click', '.unselectall', function (event) {
        $('.table input:checkbox').prop('checked', false);
        $('.table tbody tr').removeClass('text-success');

    });
    
    $(document).on('change', 'table tbody input:checkbox', function () {
        if ($(this).is(':checked')) {
            $(this).closest('tr').addClass('text-success');
        }
        else {
            $(this).closest('tr').removeClass('text-success');
        }
        var id = [];
        $(':checkbox:checked').each(function (i) {
            id[i] = $(this).val();

        });
        if (id.length === 0) //tell you if the array is empty
        {
            $('#btn_delete').prop('disabled', 'disabled');
            $('#btn_delete').addClass('btn-default');
            $('#btn_delete').removeClass('btn-success');
        }
        else {
            $('#btn_delete').prop('disabled', '');
            $('#btn_delete').addClass('btn-success');
            $('#btn_delete').removeClass('btn-default');
        }
    });
    $(document).on('click', 'thead input:checkbox', function () {
        var c = this.checked;
        $('tbody input:checkbox').prop('checked', c);
        $('tbody input:checkbox').trigger('change');

    });

});
</script>



Klik pada tombol tandai semua maka semua elemen checkbox akan ter ceklist dan merubah warna huruf menjadi hijau.

Silahkan download untuk referensi anda. Terimakasih

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website