JS29. 全选
描述
请补全JavaScript代码，实现以下效果：HTML/CSS/JavaScript 解法, 执行用时: 1695ms, 内存消耗: 77876KB, 提交时间: 2022-02-10
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <body>\n <ul>\n <li>全选<input type='checkbox' id='all'></li>\n <li>Java<input type='checkbox' class='item'></li>\n <li>javaScript<input type='checkbox' class='item'></li>\n <li>C++<input type='checkbox' class='item'></li>\n <li>python<input type='checkbox' class='item'></li>\n <li>.net<input type='checkbox' class='item'></li>\n </ul>\n\n <script>\n // 补全代码\n var all = document.querySelector('#all')\nvar options = Array.from(document.querySelectorAll('.item'))\nall.onchange = () => {\n options.forEach(x => x.checked = all.checked)\n}\noptions.forEach((item)=>{\n item.onchange = function() {\n if(!this.checked){\n all.checked = false\n }else{\n if(options.every(x => x.checked)){\n all.checked = true\n }else{\n all.checked = false\n }\n }\n }\n})\n\n \n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1768ms, 内存消耗: 77916KB, 提交时间: 2021-12-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <body>\n <ul>\n <li>全选<input type='checkbox' id='all'></li>\n <li>Java<input type='checkbox' class='item'></li>\n <li>javaScript<input type='checkbox' class='item'></li>\n <li>C++<input type='checkbox' class='item'></li>\n <li>python<input type='checkbox' class='item'></li>\n <li>.net<input type='checkbox' class='item'></li>\n </ul>\n\n <script>\n var all = document.getElementById(\"all\")\n var options = Array.from(document.querySelectorAll(\".item\"))\n // 补全代码\n all.onchange = () => {\n options.forEach((item) => {\n item.checked = all.checked\n })\n }\n options.forEach((item) => {\n item.onchange = function () {\n let isCheckAll = true\n options.forEach((item) => {\n if (!item.checked) {\n isCheckAll = false\n }\n })\n all.checked = isCheckAll\n }\n })\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1769ms, 内存消耗: 77900KB, 提交时间: 2021-12-06
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <body>\n <ul>\n <li>全选<input type='checkbox' id='all'></li>\n <li>Java<input type='checkbox' class='item'></li>\n <li>javaScript<input type='checkbox' class='item'></li>\n <li>C++<input type='checkbox' class='item'></li>\n <li>python<input type='checkbox' class='item'></li>\n <li>.net<input type='checkbox' class='item'></li>\n </ul>\n\n <script>\n // 补全代码\n var all = document.querySelector('#all');\n var options = Array.from(document.querySelectorAll('.item'));\n all.onchange = () =>{\n options.forEach(x => x.checked = all.checked);\n }\n options.forEach((item) => {\n item.onchange = function(){\n if (! this.checked){\n all.checked = false;\n }else {\n if (options.every(x => x.checked)){\n all.checked = true;\n }else{\n all.checked = false;\n }\n }\n }\n })\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1774ms, 内存消耗: 77832KB, 提交时间: 2021-12-18
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <body>\n <ul>\n <li>全选<input type='checkbox' id='all'></li>\n <li>Java<input type='checkbox' class='item'></li>\n <li>javaScript<input type='checkbox' class='item'></li>\n <li>C++<input type='checkbox' class='item'></li>\n <li>python<input type='checkbox' class='item'></li>\n <li>.net<input type='checkbox' class='item'></li>\n </ul>\n\n <script>\n // 补全代码\n var all = document.querySelector('#all')\n var options = Array.from(document.querySelectorAll('.item'))\n all.onchange = () => {\n options.forEach(x => x.checked = all.checked)\n }\n options.forEach((item)=>{\n item.onchange = function() { \n//减去了多余的一个if判断\n if(options.every(x => x.checked)){\n all.checked = true\n }else{\n all.checked = false\n }\n }\n})\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1777ms, 内存消耗: 77836KB, 提交时间: 2021-12-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <body>\n <ul>\n <li>全选<input type='checkbox' id='all'></li>\n <li>Java<input type='checkbox' class='item'></li>\n <li>javaScript<input type='checkbox' class='item'></li>\n <li>C++<input type='checkbox' class='item'></li>\n <li>python<input type='checkbox' class='item'></li>\n <li>.net<input type='checkbox' class='item'></li>\n </ul>\n\n <script>\n // 补全代码\n var all = document.getElementById(\"all\")\n var options = Array.from(document.querySelectorAll(\".item\"))\n // 补全代码\n all.onchange = () => {\n options.forEach((item) => {\n item.checked = all.checked\n })\n }\n options.forEach((item) => {\n item.onchange = function () {\n let isCheckAll = true\n options.forEach((item) => {\n if (!item.checked) {\n isCheckAll = false\n }\n })\n all.checked = isCheckAll\n }\n })\n </script>\n </body>\n</html>","libs":[]}