Table header checkbox checked all in html by using JQuery


Header CheckBox Demo Click On Checkbox
John Sena
Under Taker
Big Show
The Great Kali

In this article i'm going to show you how to select all checkbox when table header checkbox is checked. This article is common for all ASP.NET, ASP.NET MVC, PHP, JAVA,...etc.

HTML MarkUp Language Code

<div style='width:100%; text-align:center;'>
<table>
<tr>
  <th colspan='1'>
    <input id='chk' type='checkbox' value='header'/>
  </th>
  <th colspan='2'>Header CheckBox
</tr>
<tr>
  <td><input type='checkbox' value='1' /></td>
  <td>John</td>
  <td>Sena</td>  
</tr>
<tr>
  <td><input type='checkbox' value='2' /></td>
  <td>Under</td>
  <td>Taker</td>  
</tr>
<tr>
  <td><input type='checkbox' value='3'/></td>
  <td>Big</td>
  <td>Show</td>  
</tr>
<tr>
  <td><input type='checkbox' value='4'/></td>
  <td>The Great</td>
  <td>Kali</td>  
</tr>
</table>
</div>

CSS StyleSheet Code

<style>
table{
  border-collapse:collapse;
  width:100%;
}
table th{
  border:1px solid #999;
  background-color:#999;
  color:#fff;
  text-align:center;
  padding-left:10px;
}
table td{
  padding:3px;
}
</style>

JQuery Code

<script>
$("#chk").change(function(){
   if ($(this).is(':checked')) {
      $("input[type=checkbox]").each(function(index) {
      if($(this).prop('checked', true)){
        var value=$(this).val();
       }
      });
   }else{
    $("input[type=checkbox]").each(function(index) {
      if($(this).prop('checked', false)){
        var value=$(this).val();
       }
      });
   }
});
</script>
0 Komentar untuk "Table header checkbox checked all in html by using JQuery"

Back To Top