前端小demo——全选和全不选

模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。

点击顶部复选框实现全选

列表中任意一项未选中，顶部复选框就是未选中的状态

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}#div {width: 300px;margin: 100px auto;}table {border-collapse: collapse;border-spacing: 0;border: 2px solid #ccc;width: 300px;}th,td {border: 1px solid #ccc;color: #000;padding: 10px;}th {background-color: #09c;font: bold 18px "幼圆";color: #ffffff;}td {font: bold 16px "幼圆";text-align: center;}tr {background-color: rgb(237, 238, 240);}tr:hover {cursor: pointer;background-color: #fff;}body {background-color: #ccc;}</style>
</head><body><div id="div"><table><caption><h2>选择武器</h2></caption><thead><tr><th><input type="checkbox" id="all" /></th><th>武器</th><th>奥义</th></tr></thead><tbody id="content"><tr><td><input type="checkbox" /></td><td>铁碎牙</td><td>金刚爆流破</td></tr><tr><td><input type="checkbox" /></td><td>天生牙</td><td>冥道残月破</td></tr><tr><td><input type="checkbox" /></td><td>梓山弓矢</td><td>破魔净化</td></tr><tr><td><input type="checkbox" /></td><td>爆碎牙</td><td>苍龙破</td></tr><tr><td><input type="checkbox" /></td><td>斗鬼神</td><td>爆流破</td></tr><tr><td><input type="checkbox" /></td><td>丛云牙</td><td>狱龙破</td></tr></tbody></table></div><!-- <script src="common.js"></script> --><script>function zy$(id) {return document.getElementById(id)};//获取元素var all = zy$("all");//获取所有的复选框var tbodyO = zy$("content").getElementsByTagName("input");//第一步，tbody中的状态和全选复选框状态一致//注册点击事件，添加事件处理函数
    all.onclick = function () {for (var i = 0; i < tbodyO.length; i++) {tbodyO[i].checked = this.checked;}};//第二步，tbody中的复选框状态，影响全选框//为tbody中所有的复选框注册点击事件for (var i = 0; i < tbodyO.length; i++) {tbodyO[i].onclick = function () {//设置一个变量为判断标识var flag = true;//循环遍历for (var j = 0; j < tbodyO.length; j++) {//只要存在没被勾选的复选框if (!tbodyO[j].checked) {//判断标识为假，不影响全选框
            flag = false;break;}}all.checked = flag;};}</script>
</body></html>