JS编写全选，复选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选</title>
</head>
<body>
<input type="button" name="" value="全选" id="one">
<input type="button" name="" value="反选" id="two">
<input type="checkbox" name="" id="three">
<ul>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
</ul>
<script type="text/javascript">
var btn1 = document.getElementById('one')
var btn2 = document.getElementById('two')
var btn3 = document.getElementById('three')
var li = document.getElementsByName('li')
btn1.onclick = function(){
for(var i = 0;i < li.length;i++){
if(li[i].checked ==0 ){
li[i].checked = 1;
}
}
isAll();
}
btn2.onclick = function(){
for(var f = 0;f < li.length;f++){
if (li[f].checked == 1) {
li[f].checked = 0;
}else{
li[f].checked = 1;
}
}
isAll();
}
// 每个checkbox状态修改时判断是否全选
for(var i = 0;i < li.length;i++){
li[i].onchange = function(){
isAll();
}
}
// 判断当前是否全选
function isAll(){
var num = 0;
for(var i = 0;i < li.length;i++){
if(li[i].checked == 1){
num++
}
}
if(num == 6){
btn3.checked = 1;
}else{
btn3.checked = 0;
}
}
</script>
</body>
</html>
JS编写全选，复选按钮的更多相关文章
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
- ExtJS中，将Grid表头中的全选复选框取消复选
今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- WPF: 实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...
- WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...
- java freemarker导出word时添加或勾选复选框
最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...
- iOS开发-UITableView单选多选/复选实现1
TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...
- js取单选按钮，复选按钮的值
$("input[name=PType]").bind('click', function () { if ($(this).prop("checked")) ...
随机推荐
- 《疯狂Java讲义》（一） ---- 关于学习Java的反思
"听到Spring很火,就立马买来一本Spring的书来读,最后结果往往是失败,因为这种学习没有积累,没有根基,学习过程中困难重重,每天都被一些相同.类似的问题所困扰,起初热情十足,经常上论 ...
- tomcat出现的PermGen Space问题
java.lang.OutOfmemoryError: PermGen Space 的错误,导致项目无法正常运行. 出现这个错误的原因,总结一下: PermGen Space指的是内存的永久保存区,该 ...
- H5新出的flex布局
百度前端技术学院第一阶段中的任务十,就是关于flexbox布局的 与flexbox布局相关的资料如下: 1.flex布局教程-语法篇-阮一峰的网络日志 http://www.ruanyifeng.c ...
- 0，SFDC 开发篇 - 开发框架和APEX语法
1, 开发环境 Your Name | Developer Console | Debug | Open Execute Anonymous Window 输入hello world,并点击Excut ...
- git&sourcetree安装及在IntelliIJ下拉取项目基础使用
be careful: 1)git版本与Sourcetree版本最好一致 ,不能git为2.5,sourcetree为1.8 2)先安装git再安装Sourcetree 3)拥有git和sourcet ...
- asp.net上传文件超过了最大请求长度[转]
错误消息:超过了最大请求长度 错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S. 解决方案 1. 修改web.config文件可以改变这个默认值 ...
- es6 Class的继承extends & super
Class之间可以通过extends关键字,实现继承. 子类会继承父类的属性和方法. class Point { constructor(x, y) { this.x = x; this.y = y; ...
- Opencv出现错误“0xc000007b”的解决办法
装了一下午的opencv.之前用VS2010装过opencv,当时使用的是cmake编译源码的办法,这个方法好处就是不用每新建一个工程就重新链接opencv库文件.今天装了个VS2013,再装open ...
- jQuery 学习笔记（函数调用机制）
最近在学前端框架amazeui,之前用其中的CSS样式搭建了一个伪360网页,学会了点布局的东西,但是始终觉得有点无聊.所以这几天就开始研究jquery代码了. 对于我这样一个初学者来说,有很多东西都 ...
- td的所有style
td.style.clear= td.style.posRight=0 td.style.backgroundRepeat= td.style.borderTopStyle= td.style.mar ...