Membuat fitur select all checkbox dengan JavaScript

ullprasetio Juli 31, 2020
PlajariKode - Fitur check all dengan JavaScript

 Belajar JavaScript - Membuat fitur select all checkbox pada tabel dengan JavaScript.

Hai, berjumpa lagi, pada artikel kali ini kita akan membuat sebuah tabel yang didalamnya terdapat masing - masing sebuah checkbox untuk setiap barisnya.

Coba bayangkan jika record pada tabel tersebut berjumlah ratusan atau bahkan ribuan, dan asumsikan kita akan menghapus semuanya, tentunya akan memakan cukup banyak waktu untuk mengklik semua baris tersebut.

Maka dengan membuat fitur check all kita akan mempersingkatnya.

Baiklah, langsung saja mari kita mulai.

Baca juga: Cara show hide password dengan JavaScript

index.php

<!DOCTYPE html>
<html>
<head>
 <title>PlajariKode</title>
</head>
<body>
 <h1>PlajariKode - Fitur check all dengan JavaScript</h1>
 <table border="1">
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)"></th>
   <th>No. Urut</th>
   <th>Nama Lengkap</th>
  </tr>
  <tr>
   <td><input type="checkbox"/></td>
   <td>1</td>
   <td>Umar</td>
  </tr>
  <tr>
   <td><input type="checkbox"/></td>
   <td>2</td>
   <td>Ali</td>
  </tr>
  <tr>
   <td><input type="checkbox"/></td>
   <td>3</td>
   <td>Abu</td>
  </tr>
  <tr>
   <td><input type="checkbox"/></td>
   <td>4</td>
   <td>Linda</td>
  </tr>
  <tr>
   <td><input type="checkbox"/></td>
   <td>5</td>
   <td>Rini</td>
  </tr>
 </table>

 <script type="text/javascript">
  function checkAll(box) 
  {
   let checkboxes = document.getElementsByTagName('input');

   if (box.checked) { // jika checkbox teratar dipilih maka semua tag input juga dipilih
    for (let i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = true;
     }
    }
   } else { // jika checkbox teratas tidak dipilih maka semua tag input juga tidak dipilih
    for (let i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
     }
    }
   }
  }
 </script>

</body>
</html>

Penjelasan:

Pada tag input paling atas terdapat atribut onchange yang berfungi memanggil fungsi checkAll() ketika status checkbox berubah.

Dan yang membuat fitur ini bekerja yaitu fungsi JavaScrip berikut:
function checkAll(box) 
  {
   let checkboxes = document.getElementsByTagName('input');

   if (box.checked) { // jika checkbox teratar dipilih maka semua tag input juga dipilih
    for (let i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = true;
     }
    }
   } else { // jika checkbox teratas tidak dipilih maka semua tag input juga tidak dipilih
    for (let i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
     }
    }
   }
  }

Nah.. Itu saja, jika ada pertanyaan silahkan ketikan pada kolom komentar ges, terimakasih dan sampai jumpa.

Artikel terkait: Cara show hide password dengan JavaScript

Tags:

Posting Komentar

0 Komentar