Check/UnCheck Multiple Checkbox dengan Javascript

Check/UnCheck Multiple Checkbox dengan Javascript

6

Fungsi berikut berfungsi mencentang/memilih atau tidak memilih semua checkbox atau bahasa kerennya check/uncheck all multiple checkbox.

Contoh kasus penggunaan fungsi ini yaitu mungkin anda sudah pernah menggunakan phpMyAdmin, saat anda mem-browse sebuah table, maka disebelah kiri setiap baris dari data yang ditampilkan akan ada sebuah checkbox. Dan dibagian bawah list data tersebut, anda dapat men-check all dan uncheck all dari semua data tersebut yang kemudian anda dapat melakukan action edit atau delete.

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function checkUncheckAll(theElement) {

	var theForm = theElement.form;

	for(z=0; z<theForm.length;z++){

    	if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
	  		theForm[z].checked = theElement.checked;
	  	}

	}
}


HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<form action="" method="post" enctype="multipart/form-data" name="form" id="form" >
<table width="250" border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td width="50" align="center" bgcolor="#CCCCCC"><input name="checkall" type="checkbox" onclick="checkUncheckAll(this);"></td>
    <td width="100" bgcolor="#CCCCCC"><strong>Title</strong></td>
    <td width="100" bgcolor="#CCCCCC"><strong>Author</strong></td>
  </tr>
  <tr>
    <td align="center"><input name="data[]" value="1" type="checkbox"></td>
    <td>PHP </td>
    <td>admin</td>
  </tr>
  <tr>
    <td align="center"><input name="data[]" value="2" type="checkbox"></td>
    <td>Ajax</td>
    <td>admin</td>
  </tr>
  <tr>
    <td align="center"><input name="data[]" value="3" type="checkbox"></td>
    <td>Javascript</td>
    <td>admin</td>
  </tr>
  <tr>
    <td align="center"><input name="data[]" value="4" type="checkbox"></td>
    <td>HTML</td>
    <td>admin</td>
  </tr>
</table>
</form>

Demonya bisa lihat disini

6 Responses to “Check/UnCheck Multiple Checkbox dengan Javascript”

Your Responses