<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选</title> <style> #myCheck1 + label{ background-color: white; border-radius: 5px; border:1px solid #dbdbdb; width:20px; height:20px; display: inline-block; text-align: center; vertical-align: text-top; margin-left: -22px; line-height: 20px; } #myCheck1:checked + label:after{ content: "2714"; color: #8bbd26; border: 1px solid #8bbd26; background-color: white; border-radius: 5px; width: 20px; height: 20px; display: inline-block; text-align: center; margin-left: -1px; line-height: 20px; } </style> </head> <body> 全选<input type="checkbox" id="myCheck1"> <label for="myCheck1"></label> <div id="list"> <input type="checkbox" name="" value=""><span>选项一</span> <input type="checkbox" name="" value=""><span>选项二</span> <input type="checkbox" name="" value=""><span>选项三</span> <input type="checkbox" name="" value=""><span>选项四</span> </div> </body> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> var all = document.getElementById("myCheck1"); var tbody = document.getElementById("list"); var checkboxs = tbody.getElementsByTagName("input"); all.onclick = function() { for (var i = 0; i < checkboxs.length; i++) { var checkbox = checkboxs[i]; checkbox.checked = this.checked; } }; for (var i = 0; i < checkboxs.length; i++) { checkboxs[i].onclick = function() { var isCheckedAll = true; for (var i = 0; i < checkboxs.length; i++) { if (!checkboxs[i].checked) { isCheckedAll = false; break; } } all.checked = isCheckedAll; }; } </script> </html>