Ad Code

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

Post a comment

0 Comments