Html, Javascript

Check/UnCheck Multiple Checkbox dengan Javascript

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:

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:

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

speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields