前端小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——全选和全不选相关推荐

两个月入门深度学习，全靠动手实践！一位前端小哥的经验分享
两个月入门深度学习,全靠动手实践!一位前端小哥的经验分享在当前社会,技术日新月异,一个全栈工程师不及时学习新知识,掌握AI技能,再过两年就算不上"全栈"了. 产品发烧友.前端 ...
小程序高级电商前端第1周走进Web全栈工程师＜二＞
业务对象的重要性: 在上一次小程序高级电商前端第1周走进Web全栈工程师<一>----小程序注册.开发工具推荐.<风袖>首页布局详尽分析.Webstorm开发小程序必配配置.m ...
关于微信小程序的多选和全选实现
效果简述今天实现了一个小程序版的仿后端管理界面的多选和全选checkbox,大致思路如下实现 wxml  <checkbox-group bindch ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
小程序高级电商前端第1周走进Web全栈工程师＜三＞----首页Banner、分类六宫格
继续接着上一次小程序高级电商前端第1周走进Web全栈工程师<二>的首页逻辑往下演示,上一次对于首页的主题已经处理完了: 接下来则来处理Banner: 接下来则来实现一下它. 获取Banne ...
微信小程序实现单选、全选、反选、取消全选功能
实现效果源代码 <viewclass="parkNotice-email"v-for="(item2, index2) in ...
微信小程序乐园-checkbox（全选、全不选）
首先这是我的设计思路: 一.传入以下Json数据格式的数组 1.标题title 2.图片地址 3.数量num 4.价格price 5.是否选中selected 二.点击复选框toggle操作如已经选 ...
vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...

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

前端小demo——全选和全不选相关推荐

最新文章

热门文章