前端小demo——全选和全不选
生活随笔
收集整理的這篇文章主要介紹了
前端小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>?
轉載于:https://www.cnblogs.com/yuebanzhou/p/9133195.html
總結
以上是生活随笔為你收集整理的前端小demo——全选和全不选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： FFmpeg下载
- 下一篇： 纯前端实现pdf分页下载，完美支持横屏竖