js实现全选和反选功能
最近没事做,就用js写了一个复选框选择全选时,下面的按钮也都会选择上,当下面的选框被全选时,全选按钮也会被选中;还实现了一个反选功能,可供大家参考,如果大家有好的建议也可以给我留言,我们一起学习...
<script language="javascript">
//选中全选按钮,下面的checkbox全部选中
var selAll = document.getElementById("selAll");
function selectAll()
{
var obj = document.getElementsByName("checkAll");
if(document.getElementById("selAll").checked == false)
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=false;
}
}else
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=true;
}
}
}
//当选中所有的时候,全选按钮会勾上
function setSelectAll()
{
var obj=document.getElementsByName("checkAll");
var count = obj.length;
var selectCount = 0;
for(var i = 0; i < count; i++)
{
if(obj[i].checked == true)
{
selectCount++;
}
}
if(count == selectCount)
{
document.all.selAll.checked = true;
}
else
{
document.all.selAll.checked = false;
}
}
//反选按钮
function inverse() {
var checkboxs=document.getElementsByName("checkAll");
for (var i=0;i<checkboxs.length;i++) {
var e=checkboxs[i];
e.checked=!e.checked;
setSelectAll();
}
}
</script>
<html>
<body>
<center>
<input type="checkbox" id="selAll" οnclick="selectAll();" />全选
<input type="checkbox" id="inverse" οnclick="inverse();" />反选
<div id="allcheck">
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>足球<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>篮球<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跑步<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>登山<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>唱歌<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跳舞<br>
</div>
</center>
</body>
</html>
思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。
JS代码:
1 <script> 2 window.onload=function(){ 3 var CheckAll=document.getElementById('All'); 4 var UnCheck=document.getElementById('uncheck'); 5 var OtherCheck=document.getElementById('othercheck'); 6 var div=document.getElementById('div'); 7 var CheckBox=div.getElementsByTagName('input'); 8 CheckAll.onclick=function(){ 9 for(i=0;i<CheckBox.length;i++){ 10 CheckBox[i].checked=true; 11 }; 12 }; 13 UnCheck.onclick=function(){ 14 for(i=0;i<CheckBox.length;i++){ 15 CheckBox[i].checked=false; 16 }; 17 }; 18 othercheck.onclick=function(){ 19 for(i=0;i<CheckBox.length;i++){ 20 if(CheckBox[i].checked==true){ 21 CheckBox[i].checked=false; 22 } 23 else{ 24 CheckBox[i].checked=true 25 } 26 27 }; 28 }; 29 }; 30 </script>
HTML代码:
1 全选:<input type="button" id="All" value="全选" /><br /> 2 不选<input type="button" id="uncheck" value="不选" /><br /> 3 反选<input type="button" id="othercheck" value="反选" /><br /> 4 <div id="div"> 5 <input type="checkbox" /><br /> 6 <input type="checkbox" /><br /> 7 <input type="checkbox" /><br /> 8 <input type="checkbox" /><br /> 9 <input type="checkbox" /><br /> 10 <input type="checkbox" /><br /> 11 <input type="checkbox" /><br /> 12 <input type="checkbox" /><br /> 13 <input type="checkbox" /><br /> 14 <input type="checkbox" /><br /> 15 <input type="checkbox" /><br /> 16 <input type="checkbox" /><br /> 17 <input type="checkbox" /><br /> 18 <input type="checkbox" /><br /> 19 <input type="checkbox" /><br /> 20 <input type="checkbox" /><br /> 21 <input type="checkbox" /><br /> 22 <input type="checkbox" /><br /> 23 <input type="checkbox" /><br /> 24 <input type="checkbox" /><br /> 25 </div>
js实现全选和反选功能相关推荐
- checkbox全选和反选功能
用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能 <!DOCTYPE html> <html> <head><ti ...
- 关于用jQuery实现的checkbox全选和反选功能
用jQuery实现了checkbox的全选和反选功能,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
- icheck结合datatable使用方法及实现全选、反选功能
icheck结合datatable使用方法及实现全选.反选功能 一.icheck使用方法 1.引入必要文件(皮肤的css及icheck的js) 皮肤文件选中和其它组件风格一致就好 jquery的引入需 ...
- php全选和反选,纯javascript实现选择框的全选与反选功能
HTML部分 选择全部 一键上路 js部分 var oinput = document.getElementById('all'); // var oinput_s = document.getEle ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
- Android开发中ListView多屏的全选、反选功能
[size=medium] 鄙人最近刚开始学习Android,在练习的时候写到一个ListView的全选反选功能.本来以为这个功能很简单,随随便便就能搞定,结果真的下手去做的时候被虐的死去活来,不知道 ...
- 准时下班系列_Access合集之第6集—多个项目窗体实现全选和反选功能
Hi,各位同学好!我是吴明课堂的答疑老师之一陈婉. 当我们使用access默认生成的列表格式的窗体时,如何添加自定义的全选和反选功能呢? 本文将通过演示全选和反选功能的实现,教会大家如何在软件预设窗体 ...
- angular checkbox 全选和反选功能
最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用 ...
- Ext js 4 全选和反选
Ext版本:4.2 相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心 于是自己定义一个Chec ...
最新文章
- 软件项目开发计划书【申明:来源于网络】
- 简单几步制作软raid
- eval 与 Function
- php 访问 sharepoint列表,SharePoint—用REST方式访问列表
- 替代反射调用的几种方式及性能测试
- 统计图学习-类型介绍
- 如何才能在大数据中获取价值
- 均衡发展学校计算机室解说词,迎接省均衡发展学校解说词
- 绘图软件Origin新手使用教程
- 有什么软件方便画er图_数据库ER图绘制工具(DbSchema)
- Error: L6218E: Undefined symbol
- 赵绍琴温病学讲座(一)
- 群控 云控营销神器代码研究
- ​数字经济指数合集:各省、城市数字经济指数面板数据
- STEP和IGES模型转换为适用Web的glb格式
- try(){}的简单理解
- 温故知新——五大常用算法总结
- 向量召回在躺平APP的实践
- 线性回归梯度下降py实现
- 移动互联网关键技术——终端、通信和应用技术
热门文章
- 【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
- 【错误记录】Android Studio 编译报错 ( Gradle 下载错误导致 Failed to open zip file 报错 )
- 【组合数学】递推方程 ( 非齐次部分是 指数函数 且 底是特征根 | 求特解示例 )
- 【Java 并发编程】CountDownLatch 使用场景示例
- 【C++ 语言】类型转换 ( 转换操作符 | const_cast | static_cast | dynamic_cast | reinterpret_cast | 字符串转换 )
- 给web请求加遮罩动画
- GIL(全局解释器锁)与互斥锁
- oracle操作字符串:拼接、替换、截取、查找
- 升级macOS新系统后,Xcode7.2 Xcode7.3.1 在新建项目界面,出现了文字错乱的情况
- jQuery学习随笔(一)