Membuat Select All Checkbox dengan Javascript - Mari Belajar Coding -->

Sabtu, 03 Agustus 2019

Membuat Select All Checkbox dengan Javascript


Membuat Select All Checkbox dengan Javascript

Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini, kita akan belajar membuat sebuah fungsi select all checkbox sekaligus. Dengan menggunakan fungsi ini kita tidak perlu mencentang satu persatu di kotak checkbox, secara otomatis akan menandai semua checkbox yang ada.

Membuat Select All Checkbox dengan Javascript

Pertama-tama buat terlebih dahulu inputan checkbox.
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2"></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4"></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5"></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>

Tampilan pilihan checkbox jika dijanlan.
Membuat Select All Checkbox dengan Javascript

Selanjutnya buat fungsi checkAll menggunakan javascript.
<script type="text/javascript">
 function checkAll(ele) {
      var checkboxes = document.getElementsByTagName('input');
      if (ele.checked) {
          for (var i = 0; i < checkboxes.length; i++) {
              if (checkboxes[i].type == 'checkbox' ) {
                  checkboxes[i].checked = true;
              }
          }
      } else {
          for (var i = 0; i < checkboxes.length; i++) {
              if (checkboxes[i].type == 'checkbox') {
                  checkboxes[i].checked = false;
              }
          }
      }
  }
</script>

Kode lengkapnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <script type="text/javascript">
  function checkAll(ele) {
       var checkboxes = document.getElementsByTagName('input');
       if (ele.checked) {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox' ) {
                   checkboxes[i].checked = true;
               }
           }
       } else {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox') {
                   checkboxes[i].checked = false;
               }
           }
       }
   }
 </script>
</head>
<body>
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2"></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4"></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5"></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</body>
</html>
Membuat Select All Checkbox dengan Javascript

Baca juga: Menyimpan Data Checkbox ke Database dengan PHP

Untuk mendisable salah satu checkbox agar tidak terpilih secara otamatis, tambahkan atribut disabled pada inputan checkbox dan mengubah fungsi checkAll pada javascript. Contoh programnya seperti dibawah ini. Lihat baris yang diberi highlight.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <script type="text/javascript">
  function checkAll(ele) {
       var checkboxes = document.getElementsByTagName('input');
       if (ele.checked) {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox'  && !(checkboxes[i].disabled) ) {
                   checkboxes[i].checked = true;
               }
           }
       } else {
           for (var i = 0; i < checkboxes.length; i++) {
               if (checkboxes[i].type == 'checkbox') {
                   checkboxes[i].checked = false;
               }
           }
       }
   }
 </script>
</head>
<body>
<table border="1" >
 <thead>
  <tr>
   <th><input type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
   <th>Data</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="1"></td>
   <td>1</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="2" disabled=""></td>
   <td>2</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="3"></td>
   <td>3</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="4" disabled=""></td>
   <td>4</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="5" disabled=""></td>
   <td>5</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="6"></td>
   <td>6</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="7"></td>
   <td>7</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="chkbox[]" value="8"></td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</body>
</html>
Membuat Select All Checkbox dengan Javascript

Tutorial membuat select all checkbox dengan javascript sampai disini, sekian semoga bermanfaat.



Related Search:
Membuat select all checkbox dengan Javascript
Membuat select all checkbox dengan PHP
Menampilkan checkbox di tabel

Related Posts

Load comments