JS——全选与全不选
1、每个子input标签都需要进行判断
2、使用开闭原则，一旦满足条件就改变默认值
3、在给主input标签注册事件时，要求主input标签的checked值赋值给子标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadInp" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="tbody">
<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>
var inp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var inps = tbody.getElementsByTagName("input");
//给表头的input标签注册事件
inp.onclick = function () {
for (var i = 0; i < inps.length; i++) {
inps[i].checked = this.checked;
}
}
//给tbody中的input标签注册事件
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function () {
var bool = true;
for (var i = 0; i < inps.length; i++) {
if (inps[i].checked === false) {
bool = false;
}
}
inp.checked = bool;
}
}
</script>
</body>
</html>
JS——全选与全不选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- JS或jQuery实现一组复选框的全选和取消全选？
//1.JS方式实现:checkbox 全选/取消全选 var isCheckAll = false; function swapCheck() { if (isCheckAll) { ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
- FineReport——JS二次开发（复选框全选）
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
随机推荐
- springboot 2.x 集成 drools 7.x
简介:springboot 2.0.4.RELEASE 集成 drools 7.11.0.Final 1.项目结构 2. pom.xml文件 <?xml version="1.0&qu ...
- jquery ajax报Uncaught TypeError ：Illegal invocation
使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错信息如图: 上网查了一下jquery的这个错误,导致这个错误的原因有俩点 ...
- kendo中需要kendo.default.min.css
kendo中需要kendo.default.min.css,这个默认是没有加入头文件的,还是需要手动加入一下 <link href="~/Scripts/kendo/styles/ke ...
- 武大OJ 622. Symmetrical
Description Cyy likes something symmetrical, and Han Move likes something circular. Han Mov ...
- Android studio 解决setText中文乱码问题
我在用Android Studio编译器的时候,总会遇到非常多乱码的问题.第一个乱码问题是在Layout文件中面定义了EditText.在代码中须要将获取到的内容填充到EditText里面,这时候假设 ...
- Chrome控制台命令
window.print();打印当前窗口内容或输出为pdf
- U4699 鸡蛋
U4699 鸡蛋 0通过 37提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 调皮的kkk准备恶搞他的同学兼朋友——你! 题目描述 kkk准备从楼上扔鸡蛋下来砸在lz ...
- 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化，同时对这些虚拟资源进行集中调度和管理
华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...
- git 命令 —— checkout
git checkout 会重写工作区.check in 常常表示酒店入住,则 check out 就表示结账(检查)离开. 1. 基本用法 Git学习笔记04–git checkout git ch ...
- FSDataInputStream对象 读取数据