<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content=""> <title>获取页面所有的checkbox</title> </head> <body> <input type="checkbox" name="box1" id="box1">box1 <input type="checkbox" name="box2" id="box2">box2 <input type="checkbox" name="box3" id="box3">box3 <input type="checkbox" name="box4" id="box4">box4 <input type="checkbox" name="box5" id="box5">box5 <input type="checkbox" name="box6" id="box6">box6 <script> var inputs = document.getElementsByTagName("input"); var boxs = []; for (let i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox") { boxs.push(inputs[i]) } } console.log(boxs) </script> </body> </html>
全选，取消全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> 新闻<input type="checkbox"/><br/> 电影<input type="checkbox"/><br/> 音乐<input type="checkbox"/><br/> 娱乐<input type="checkbox"/><br/> 八卦<input type="checkbox"/><br/> 直播<input type="checkbox"/><br/> </div> <input type="checkbox" onclick="selectAll(this);" />全选/全取消<br/> <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script> <script type="text/javascript"> function selectAll(checkbox) { $('input[type=checkbox]').prop('checked', $(checkbox).prop('checked')); } </script> </body> </html>