最近没事写了个特别基础的多选框功能代码,代码如下:
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代码的更多相关文章

  1. 单选复选框的js代码取值

    单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...

  2. datatables.js 简单使用--多选框和服务器端分页

    说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...

  3. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  5. angular复选框式js树形菜单(二)

    删除(过滤)树形结构某一个子节点: function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (it ...

  6. angular复选框式js树形菜单(一)

    treeView.html <ul class="tree-view"> <li ng-repeat="item in treeData" n ...

  7. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  8. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  9. easyui combo下拉框多选框

    按照自己的方式,先晒下效果图: 选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个 其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码. 1.页面的展示,i ...

随机推荐

  1. 探究Spring原理

    探究Spring原理 探究IoC原理 首先我们大致了解一下ApplicationContext的加载流程: 我们可以看到,整个过程极为复杂,一句话肯定是无法解释的,所以我们就从ApplicationC ...

  2. (第二章第三部分)TensorFlow框架之读取二进制数据

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html (第二章第二部分)Tens ...

  3. 华山论剑之 PostgreSQL sequence (二)

    rename 对 sequence 的影响 关联列与 sequence 后,即 sequence 属于该列后,drop 表或列时会自动 drop 相关 sequence. 但如果对表或列 rename ...

  4. LeetCode-008-字符串转换整数 (atoi)

    字符串转换整数 (atoi) 题目描述:请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAt ...

  5. 数字逻辑实践6-> 从数字逻辑到计算机组成 | 逻辑元件总结与注意事项

    00 一些前言 数字逻辑是计算机组成与体系结构的前导课,但是在两者的衔接之间并没有那么流畅,比如对面向硬件电路的设计思路缺乏.这篇总结是在数字逻辑和计组体系结构的衔接阶段进行的. 虽然这篇文是两门课的 ...

  6. Wireshark抓包工具解析HTTPS包

    目录 一.遇到的问题 二.解决方案 1. 动态生成签名证书 2. Wireshark配置 3. 最终效果 一.遇到的问题 本学期的计算机网络课程需要使用到Wireshark抓包工具进行网络抓包实验,原 ...

  7. 'javac' 不是内部或外部命令,也不是可运行的程序或批处理文件

    记录在配置环境变量中被 Path 环境坑的一次前提:保证自己电脑中jdk环境配置都没有问题,即JAVA_HOME.Path.CLASSPATH均配置成功. 在这里我就不操作如何配置环境变量了,百度上面 ...

  8. iframe于iframe页面之间的函数相互调用

    因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...

  9. 无线渗透之破解wifi

    首先你要有一张支持kali的网卡,因为这整个过程都是在kali下进行的 开启网卡监听模式 # airmon-ng start wlan0 监听附近的无线 # airodump-ng wlan0mon ...

  10. 如何批量修改图片名称(win下)

    深度学习目标检测任务中常常需要大量的图片,这些图片一般来自网络爬虫或是自行批量下载,但下载下的图片常常在保存时被命名为长段英文数字混写,因此规律化命名下载的图片数据名称就显得尤为重要了,下面我演示在本 ...