购买商品复选框全选 单选
<table><thead><tr><th><input type="checkbox" id="quan"></td><th>商品</td><th>价格</td></tr></thead><tbody id="xia"><tr><td><input type="checkbox"></td><td>iPad</td><td>3000</td></tr><tr><td><input type="checkbox"></td><td>Mac</td><td>8000</td></tr><tr><td><input type="checkbox"></td><td>iPhone</td><td>8000</td></tr></tbody></table>
HTML代码
//获取元素var quans = document.getElementById('quan');//先获取xia这个id,然后获取到xia这个id里面所有的inputvar xias = document.getElementById('xia').getElementsByTagName('input');//注册点击事件quans.onclick = function(){//this.checked是当前复选框的状态//this当前(函数调用者)//checked是复选框的值,是否被选中for(var i = 0;i<xias.length;i++){//让(下面商品复选框)xias[i]=this.checkedxias[i].checked = this.checked;}}
思路:(1)首先,上面的全选复选框选中,下面的所有商品复选框一起选中
获取元素
注册点击事件
this.checked是当前复选框的状态
最后循环让下面的商品复选框=当前复选框的状态(被选中)
//利用for循环给所有下面复选框注册点击事件for(var i = 0;i<xias.length;i++){//注册事件xias[i].onclick = function(){//flag控制全选按钮是否被选中var flag = true;//每次点击复选框都要循环一次看是不是三个复选框都被选择for(var i = 0;i<xias.length;i++){//xias[i].checked 代表点击后复选框被选中,但是!代表反义也就是没全选中if(!xias[i].checked){//全选按钮flag=falseflag = false;}}//全选按钮等于flag等于truequans.checked = flag;}}
思路(2)如果下面所有商品复选框都被选中,则上面的全选复选框被选中。
利用循环给下面所有商品复选框注册点击事件
定义一个flag变量(控制全选按钮是否被选中)
再利用一个循环,每次点击下面商品复选框都要循环一次看是不是所有复选框都被选中
利用if语句 如果商品复选框有一个没被选中,则flag=false
最后全选按钮等于flag等于true,被选中
购买商品复选框全选 单选相关推荐
- 复选框全选效果,根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果 逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
- Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案 参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
- JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- 自制jQuery 复选框全选与反选插件
(function ($) { //复选框全选 $.fn.checkAll = function (options) { var defaults = { chName:"checkName ...
- 复选框 全选 以及 获取所有选中的值
复选框 全选 以及 获取所有选中的值 总结一下 jsp中获取 数据 <%Map<String,List> map = (Map<String,List>)Function ...
- html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
- html 怎么整体全选功能,html复选框全选按钮
如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...
- 小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
- react实现全选和反选_react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下 运行效果图如下: 代码: import React, { Component } from 'react'; ...
最新文章
- 利用栈求表达式的值_高一数学月考考点之函数的表达式详解
- 斯隆奖新晋得主宋舒然:从视觉出发,打造机器人之「眼」
- 如何将命令行参数传递给Node.js程序?
- 关于.NET技术体系的思维导图
- python0.1+0.2_为什么0.1+0.2=0.30000000000000004
- 【项目实战】基于python的申请评分卡模型
- 【白话机器学习】算法理论+实战之关联规则
- 阿里云交通数据中台解决方案,打造“数字化生产力”
- 经常收到信用卡邀请短信,但为什么总是办不下来?
- 紫外线杀菌器:Photoscience紫外线杀菌器在食品饮料中的作用
- 使用Badboy录制脚本
- html邮件格式完整规范,邮件模板css及html设计规范
- 公民住宅权不可侵犯!为阻强拆致人重伤,属正当防卫
- ECCV2016 paper list (完整版)
- 内分泌6项检查费用_内分泌6项检查费用是多少 详解内分泌6项检查是什么
- QuickBI-自建数据库MySQL连接
- html响应式页面源码,关于响应式页面
- 热榜|Shopee马来站点热门搜索关键词干货分享!
- 在这个世界上,还有什么东西是不会过期的?
- android listview分区域监听,listview的监听事件
热门文章
- sqlserver 统计专业中班级数和男生、女生各有多少人
- Wh问句,疑问句,祈使句,感叹句,10
- 使用码云和博客园学习简易教程
- php越权执行命令漏洞_PHP漏洞挖掘思路+实例 第二章
- 词法分析器的构成(含源代码)
- Python数据处理中 pd.concat 与 pd.merge 区别
- 爬虫入门学习(八)模拟登录丁香园论坛爬取用户信息
- 高手分享:善用组策略禁止不明U盘使用_xitongshoucang.com
- 2600万TRX被盗背后的罗生门
- 除了IPv4,还有IPv5、IPv6、IPv7和IPv9,IPv10