depositphotos.com
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.
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><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.
Belum ada tanggapan untuk "Membuat select dan Deselect All pada Checkbox dengan Javascript"
Posting Komentar