<!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"> <title>全选反选</title> <style> * { margin: 0; padding: 0; } dl { 120px; margin: 100px auto; padding: 10px; border: 1px solid #000; } input { margin-right: 10px; } dt { padding-bottom: 10px; border-bottom: 1px solid #000; font-size: 14px; } dt a { color: #0099FE; text-decoration: none; margin-left: 10px; } dt a:hover { color: #444; } dd p { padding: 10px 0; } </style> <script> window.onload = function () { const checkAll = document.querySelector('.checkAll') const checkItems = document.querySelector('dd').querySelectorAll('input') const reserveCheck = document.querySelector('.reserveCheck') checkItems.forEach(item => { item.addEventListener('click', function () { checkAll.checked = isAll() }) }) checkAll.addEventListener('click', function () { checkItems.forEach(item => { item.checked = checkAll.checked }) }) reserveCheck.addEventListener('click', function () { checkItems.forEach(item => { item.checked = !item.checked checkAll.checked = isAll() }) }) function isAll() { for (const item of checkItems) { if (!item.checked) { return false } } return true } } </script> </head> <body> <dl> <dt> <input type="checkbox" class="checkAll"> <label>全选</label><a href="javascript:;" class="reserveCheck">反选</a></dt> <dd> <p> <input type="checkbox" name="item">选项1</input> </p> <p> <input type="checkbox" name="item">选项2</input> </p> <p> <input type="checkbox" name="item">选项3</input> </p> <p> <input type="checkbox" name="item">选项4</input> </p> <p> <input type="checkbox" name="item">选项5</input> </p> <p> <input type="checkbox" name="item">选项6</input> </p> <p> <input type="checkbox" name="item">选项7</input> </p> <p> <input type="checkbox" name="item">选项8</input> </p> <p> <input type="checkbox" name="item">选项9</input> </p> <p> <input type="checkbox" name="item">选项10</input></p> </dd> </dl> </body> </html>