题目
请补全JavaScript代码,实现以下效果:
1. 选中"全选"框,以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。
3. 当其他复选框全部选中,"全选框"为选中状态。
4. 当其他复选框有一个未选中,"全选框"取消选中状态。
注意:
1. 必须使用DOM0级标准事件(onchange)
编辑
核心代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选</title> </head> <style>ul { list-style: none; } </style> <body> <!-- 请补全JavaScript代码,实现以下效果: 1. 选中"全选"框,以下所有选项全部勾选。 2. 把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。 3. 当其他复选框全部选中,"全选框"为选中状态。 4. 当其他复选框有一个未选中,"全选框"取消选中状态。 注意: 1. 必须使用DOM0级标准事件(onchange) --> <ul> <li>全选<input type='checkbox' id='all'></li> <li>Java<input type='checkbox' class='item'></li> <li>javaScript<input type='checkbox' class='item'></li> <li>C++<input type='checkbox' class='item'></li> <li>python<input type='checkbox' class='item'></li> <li>.net<input type='checkbox' class='item'></li> </ul> <script>// 补全代码 var all = document.querySelector('#all') var options = Array.from(document.querySelectorAll('.item')) all.onchange = () => { options.forEach(x x.checked = all.checked) } options.forEach((item) => { item.onchange = function () { if (!this.checked) { all.checked = false } else { if (options.every(x x.checked)) { all.checked = true } else { all.checked = false</script> </body> </html>
总结
将类数组使用from转化为真正的数组才能使用every