<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> </head> <body> <table> <thead> <tr> <th> <input type="checkbox" id="j_cball"/> </th> <th>product</th> <th>price</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>iphone</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>huawei</td> <td>9000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>sony</td> <td>3000</td> </tr> </tbody> </table> <style> .bg{ background-color: blueviolet; } </style> <script> var j_cbAll = document.getElementById('j_cball'); var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); j_cbAll.onclick = function(){ for(var i = 0; i < j_tbs.length; i++){ j_tbs[i].checked = this.checked; } } var flg = true; for(var i = 0; i < j_tbs.length; i++){ j_tbs[i].onclick = function(){ for(var i = 0; i < j_tbs.length; i++){ if(j_tbs[i].checked){ flg = false; break; } } j_cbAll.checked = flg; } } </script> </body> </html>