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.
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>
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>
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