简单的多选框选择功能js代码
最近没事写了个特别基础的多选框功能代码,代码如下:
js部分:
//获取所有class为checkbox的多选按钮(需要以下功能需要先写出对应功能的元素)。
var checkBoxList = document.getElementsByClassName("checkbox"),
checkAll = document.getElementById("checkAll"),//全选
checkReverse = document.getElementById("checkReverse"),//反选
checkClear = document.getElementById("checkClear");//清空
//全选
checkAll.onclick = function(){
for(var i=0;i<checkBoxList.length;i++){
checkBoxList[i].checked=true;
}
}
//反选
checkReverse.onclick = function(){
for(var i=0;i<checkBoxList.length;i++){
if(checkBoxList[i].checked==true){
checkBoxList[i].checked=false;
}else{
checkBoxList[i].checked=true;
}
}
}
//清空
checkClear.onclick = function(){
for(var i=0;i<checkBoxList.length;i++){
checkBoxList[i].checked=false;
}
}
html部分:
<input type="checkbox" class="checkbox" id="c1">
<input type="checkbox" class="checkbox" id="c2">
<input type="checkbox" class="checkbox" id="c3">
<a id="checkAll" href="javascript:void(0)">全选</a>
<a id="checkReverse" href="javascript:void(0)">反选</a>
<a id="checkClear" href="javascript:void(0)">清空</a>
第一次写文章,大牛随便看看,以后会陆续写一些,欢迎大家一起交流进步~
简单的多选框选择功能js代码的更多相关文章
- 单选复选框的js代码取值
单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...
- datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
- jquery简单实现复选框的全选与反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 纯css3单选框/复选框美化样式代码
纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus 选择兴趣爱好 女 绘画 摄影 骑行 原理在这 ...
- angular复选框式js树形菜单(二)
删除(过滤)树形结构某一个子节点: function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (it ...
- angular复选框式js树形菜单(一)
treeView.html <ul class="tree-view"> <li ng-repeat="item in treeData" n ...
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- js复选框实现全选、全不选、反选
复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...
- easyui combo下拉框多选框
按照自己的方式,先晒下效果图: 选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个 其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码. 1.页面的展示,i ...
随机推荐
- 分布式 PostgreSQL - Citus 架构及概念
节点 Citus 是一种 PostgreSQL 扩展,它允许数据库服务器(称为节点)在"无共享(shared nothing)"架构中相互协调.这些节点形成一个集群,允许 Post ...
- 资源管理模式:Evictor模式
Evictor模式描述了何时以及如何释放资源以优化资源管理.这个模式让我们可以配置不同的策略来自动决定哪些资源应该释放,以及应该在什么时候释放. 实例 考虑一个网络管理系统--管理多个网络元素.这些网 ...
- ACM训练,大理石在哪儿?
int p = lower_bound(a, a+num, x) - a; //在已排序数组a中查找大于或等于x的第一个位置 lower_bound( )返回的是一个迭代器,-a相当于减去a的首地址, ...
- SQL从零到迅速精通【实用函数(1)】
语法是一个编程语言的基础,真的想玩的6得飞起还是要靠自己定义的函数和变量. 1.使用DECLARE语句创建int数据类型的名为@mycounter的局部变量,输入语句如下: DECLARE @myco ...
- 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课
开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...
- CF1453D题解
VP 的时候发现的一道数学题( 在思考这个问题之前,先让我们思考一件事:走到距离上一个存档点 \(n\) 的位置的期望是多少?(假设这个值为 \(f[n]\)) 先思考 \(f[1]\) 是多少,很明 ...
- VTK数据拓扑结构、几何结构和属性数据
读取到VTK数据后,将数据组织起来并添加属性值. 示例: #include <vtkSmartPointer.h> #include <vtkPoints.h> #includ ...
- Golang 基础之基础语法梳理 (三)
大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第三章节 Golang 基础之基础语法梳理 (一) Gol ...
- dotnet 6 使用 string.Create 提升字符串创建和拼接性能
本文告诉大家,在 dotnet 6 或更高版本的 dotnet 里,如何使用 string.Create 提升字符串创建和拼接的性能,减少拼接字符串时,需要额外申请的内存,从而减少内存回收压力 本文也 ...
- Cobalt Strike的使用
0x00 Cobalt Strike简介 Cobalt Strike 一款以metasploit为基础的GUI的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听, ...