Cara Membuat select dan Deselect All pada Checkbox dengan Javascript

By | Januari 29, 2019

Membuat select dan Deselect All pada Checkbox dengan Javascript – Saat membuat suatu aplikasi, entah itu aplikasi yang berbasis web ataupun dekstop, tak jarang kita akan menemukan checkbox yang setiap klik akan secara otomatis checkbox akan menandai semua checkbox.Teknik ini sering kita sebut dengan Select All.

Pada tutorial ini, kita akan belajar cara membuat Select All pada checkbox. disini saya menggunakan dua cara yaitu dengan menggunakan getElementsByClassName() untuk memilih group dengan class, atau anda bisa memilih group dengan attribut nama menggunakan format array dengan getElementsByName.

Baca Juga: Belajar Javascript dari Nol

oke. kita langsung aja membuat script nya menggunakan metode
getElementsByClassName.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(master,group){
var cbArray = document.getElementsByClassName(group);
for(var i=0; i < cbArray.length; i++){
var cb = document.getElementById(cbArray[i].id);
cb.checked = master.checked;           }            }
</script>
</head>
<body>
<input type="checkbox" id="cb_master" onchange="myFunction(this,'cb')">Select All<br>
<input type="checkbox" id="cb_1" class="cb">HTML 5<br>
<input type="checkbox" id="cb_2" class="cb">CSS<br>
<input type="checkbox" id="cb_3" class="cb">PHP<br>
<input type="checkbox" id="cb_4" class="cb">JavaScript
</body>
</html>

Itulah teknik untuk Select dan Deselect CheckBox, teknik ini bisa anda terapkan di form-form yang membutuhkan select all, seperti pemilihan kategori, memilih data yang dihapus.