<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ margin:100px auto; border-spacing: 0; background-color: #cccccc; } td{ 100px; height: 50px; text-align: center; background-color: #ff0; } </style> </head> <body> <table> <tr> <th><input type="checkbox"></th> <th>T1</th> <th>T2</th> <th>T3</th> </tr> <tr> <td><input type="checkbox"></td> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td><input type="checkbox"></td> <td>B1</td> <td>B2</td> <td>B3</td> </tr> <tr> <td><input type="checkbox"></td> <td>C1</td> <td>C2</td> <td>C3</td> </tr> </table> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(function () { $("th>input").click(function () { $("tr input").prop("checked",$(this).prop("checked")); }); $("td input").click( function () { var allc = $("td input").length; var checkedc = $("td input:checked").length; if(allc == checkedc){ $("th>input").prop("checked",true); } else{ $("th>input").prop("checked",false); } } ); }); </script> </body> </html>