简单的多选框选择功能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 ...
随机推荐
- 爬虫之标签查找补充及selenium模块的安装及使用与案例
今日内容概要 bs模块之标签查找 过滤器 selenium模块 今日内容详细 html_doc = """ <html> <head> <t ...
- react的”Hello World !“
本文主要简述react的开始使用 1.引入js文件 <!-- 1.核心文件 --> <script crossorigin src="https://unpkg.com/r ...
- Redis环境搭建-Linux单机
一.准备Linux 可以买云服务器,也可以用虚拟机,我用的是虚拟机Oracle VM VirtualBox 二.编译环境 1.检查linux下是否安装环境 yum list installed | g ...
- awk讲义-1-快速入门
awk讲义-1-快速入门 一.目标问题: 1.统计各个省份中城市的数量(一维数组) 2.统计城市中区县数量,要求输出格式:省份 城市 区县数量(二维数组) 3.求两个文件的交集 4.省市和市区两个文件 ...
- tp 天气Vue参考
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta cha ...
- Clickhouse 与 Kafka 的数据同步
作者: LemonNan 原文地址: https://mp.weixin.qq.com/s/SUUHF9R_FKg-3vq7Q3cwBQ 注: 转载需注明作者及原文地址 介绍 Clickhouse 本 ...
- CF498B题解
咋黑色啊,这不是看到数据范围就去想 \(O(nT)\) 的做法吗? 然后仔细想想最靠谱的就是 DP. 设 \(dp[n][T]\) 表示听完第 \(n\) 首歌,总共听了 \(T\) 秒. 很明显有 ...
- 【elasticsearch】搜索过程详解
elasticsearch 搜索过程详解 本文基于elasticsearch8.1.在es搜索中,经常会使用索引+星号,采用时间戳来进行搜索,比如aaaa-*在es中是怎么处理这类请求的呢?是对匹配的 ...
- fashion_mnist 计算准确率、召回率、F1值
本文发布于 2020-12-27,很可能已经过时 fashion_mnist 计算准确率.召回率.F1值 1.定义 首先需要明确几个概念: 假设某次预测结果统计为下图: 那么各个指标的计算方法为: A ...
- web服务器-nginx负载均衡
web服务器-nginx负载均衡 一 负载均衡的作用 负载均衡: 分摊到多个操作单元上进行执行,和它的英文名称很匹配.就是我们需要一个调度者,保证所有后端服务器都将性能充分发挥,从而保持服务器集群的整 ...