js实现-小框框全选
点击全选下面单独的肉也会全选,再次点击取消
一个一个点击肉,点完--全选也会被选上
HTML代码---CSS略
<table>
<tr>
<th>
<input type="checkbox" id="checkAll" /> 全选/全不选
</th>
<th>名字</th>
<th>店铺</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>¥88</td>
</tr>
</table>
JavaScript代码
<script>
// 获取全选
var all = document.getElementById('checkAll');
// 获取单独菜,选择
var xiao = document.getElementsByClassName('dx');
// 点击全选,触发事件
all.onclick = function () {
// 循环单选
for (var i = 0; i < xiao.length; i++) {
xiao[i].checked = all.checked;
}
} // 反选
// 外圈循环,事件次数
for (var i = 0; i < xiao.length; i++) {
// 事件
xiao[i].onclick = function () {
// 循环单选次数,判断是否chenked是否为true
for (var a = 0; a < xiao.length; a++) {
if(xiao[a].checked == false) {
break;
}
}
//则循环次数完成.所有单独都为true,则all为true
a == xiao.length ? all.checked = true : all.checked = false;
}
}
</script> 表述不好。
js实现-小框框全选的更多相关文章
- JS小案例--全选和全不选列表功能的实现
纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- 微信小程序全选,微信小程序checkbox,微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- js实现checkbox的全选和全不选功能
html代码: <form name="form1" method="post" action="manage.php?act=sub" ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
随机推荐
- Codeforces Round #350(Div 2)
因为当天的下午才看到所以没来得及请假所以这一场没有打...于是信息课就打了这场的模拟赛. A题: *题目描述: 火星上的一年有n天,问每年最少和最多有多少休息日(周六周天). *题解: 模7分类讨论一 ...
- IOC和AOP使用扩展之AOP详解实现类
摘要: “Depend on yourself” is what nature says to every man. Parents can help you. Teachers can hel ...
- UE4 Pro Tips(keeps updating)
Consolidate 功能 :在工程范围内用一种资源替换另外一种或多种资源具体操作:同时在编辑器中选中两个或多个资源,右键>Asset Actions>Replace Reference ...
- hashcode、equals、HashMap间的关系
1.从Object说起package com.hallo.collection; public class ObjectDemo { public static void main(String[] ...
- ContentProvider,ContentResolver和ContentObserver 使用
1 ContentProvider内容提供者 四大组件之一,实现不同程序实现数据的共享.联系人应用就使用了ContentProvider,比如你在自己的应用可以读取和修改联系人的数据(获得相应权限). ...
- 将String转化成Stream,将Stream转换成String, C# Stream 和 byte[] 之间的转换(文件流的应用)
static void Main( string[] args ) { string str = "Testing 1-2-3"; //convert string 2 strea ...
- leetcode 142. 环形链表 II(c++)
给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...
- java8 list转Map报错Collectors.toMap :: results in "Non-static method cannot be refernced from static context"
1.问题:java8 list转Map 报错Collectors.toMap :: results in "Non-static method cannot be refernced fro ...
- Java各类型占字节数
byte 1字节short 2字节int 4字节long 8字节float 4字节double 8字节char 2字节boolean 1字节 其中,换算关系: 1GB=1024MB 1MB=1024K ...
- Oracle数据库文件导出为CSV格式的方法
1 安装PLSQL Developer,并连接Oracle数据库. 2 执行sql语句,将要导出的表格显示出来. select * from table名; 3 如下点击导出查询结果,选择数据格式,即 ...