title: if i select header checkbox, all rows should be selected, but if any of the row is not checked, the header checkbox should be unselected in a table
body: <pre><code> @using (Html.BeginForm("Delete", "Employee", FormMethod.Post))  
                  {  
                      &lt;button type="submit" value="Delete" class="btn btn-sm btn-danger rounded-0" onclick="return confirm('Are you sure?')"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt; Delete&lt;/button&gt;  
                      &lt;br /&gt; &lt;br /&gt;
                      &lt;table id="DataTable" border="1"&gt;     
                                   &lt;tr&gt;
                                      &lt;th&gt;&lt;input type="checkbox" id="checkBoxAll"  /&gt;&lt;/th&gt;
                                      &lt;th&gt;EmployeeName&lt;/th&gt;
                                      &lt;th&gt;Designation&lt;/th&gt;
                                      &lt;th&gt;Department&lt;/th&gt;
                                      &lt;th&gt;Gender&lt;/th&gt;
                                  &lt;/tr&gt;
  
  @for (int i = 0; i &lt; Model.Rows.Count; i++)
  {
      &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="ID" value="@Model.Rows[i][0]" class="chkCheckBoxId" /&gt;&lt;/td&gt;
      &lt;td&gt;@Model.Rows[i][1]&lt;/td&gt;
      &lt;td&gt;@Model.Rows[i][2]&lt;/td&gt;
      &lt;td&gt;@Model.Rows[i][3]&lt;/td&gt;
      &lt;td&gt;@Model.Rows[i][4]&lt;/td&gt;
      &lt;td&gt;
         &lt;a href="@Url.Action('Edit', 'Employee', new { @id = Model.Rows[i][0] })"&gt;Edit&lt;/a&gt;
         &lt;a href="@Url.Action('Delete', 'Employee', new { @id = Model.Rows[i][0] })"&gt;Delete&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
  }
  &lt;/table&gt;&lt;br /&gt;
  &lt;a href="@Url.Action('Create','Employee')"&gt;Add Employee&lt;/a&gt;
   }
  </code></pre>