Checking the header checkbox when all the checkboxes in the table are checked

0
votes

I want the header checkbox to get checked when all the checkboxes in the table are checked and if even a single checkbox is unchecked the header checkbox should be unchecked..

<html>
<table id="table" style="height:350px;margin-left:1em;width:700px;">
    <!--this is my table header-->
    <tr style="display:table-row">
        <th class="checkbox"><input type="checkbox"/></th>
        <th class="Name">NAME</th>
        <th class="Score">SCORE</th>
        <th class="Email">EMAIL</th>
        <th class="Empty"></th>
    </tr>
    <tr>
        <!--tabledata-->
        <td ><input type="checkbox" /></td>
        <td >Vijay Prakash</td>
        <td >34</td>
        <td >[email protected]</td>
        <td ></td>
    </tr>
    <tr>
        <!--tabledata-->
        <td ><input type="checkbox" /></td>
        <td >Sashi Pagadala</td>
        <td >21</td>
        <td >[email protected]</td>
        <td ></td>
    </tr>
</table>
<input type="button" id="btnCalculate" value="Calculate"/>
<label>Average:</label>
<label id="lblAverage"></label>
<label>Max:</label>
<label id="lblMax"></label>
</form>
</html>
1
jqueryhtmlcheckboxhtml-table
Using jquery......... – Bharat Bhushan

1 Answers

2
votes

See if this is what you are looking for.

Demo

$('td input:checkbox').change(function(){
    $('th.checkbox :checkbox').prop('checked',$('td input:checkbox:checked').length == $('td input:checkbox').length);
});