最近没事写了个特别基础的多选框功能代码,代码如下:
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. kibana实现条件查询和修改

    GET jyb_report_index_preprod/_search { "query": { "match": { "report_id&quo ...

  2. Java 实现Https访问工具类 跳过ssl证书验证

    不多BB ,代码直接粘贴可用 import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.F ...

  3. VMware:用Ubuntu创建一个新的虚拟机

    1)进入VMware,选择创建新虚拟机 2)安装ISO文件 3)各种名,密码 这里有可能出错: 原因是你输入的用户名和系统用户名重复了,修改一下就可以了 4)安装位置:这里可以是任意盘,但至少要有4G ...

  4. Spring源码之七registerListeners()及发布订阅模式

    Spring源码之七registerListeners()及发布订阅模式 大家好,我是程序员田同学. 今天带大家解读refresh()方法中的registerListeners()方法,也就是我们经常 ...

  5. MySQL[练习|面试题]-我的租房网

    1 # 创建数据库 2 CREATE DATABASE Tenement; 3 4 # 切换数据库 5 USE Tenement; 6 # 创建客户信息表 sys_user 7 CREATE TABL ...

  6. sql 名词解析

    针对这个 sql 语句进行解析 1 SELECT 2 a.* 3 , b.L12_create_time L1第一次转L2的时间 4 , ROUND(c.L1_pending/60, 2) " ...

  7. 十进制数转IEE754单精度浮点数以及浮点数转换的python实现

    十进制数转IEE754单精度浮点数 理解题目 单精度浮点数:单精度浮点数是用来表示带有小数部分的实数,一般用于科学计算.占用4个字节(32位)存储空间,包括符号位1位,阶码8位,尾数23位.其数值范围 ...

  8. MM32F0140 UART1空闲中断接收

    目录: 1.MM32F0140简介 2.初始化MM32F0140 UART1空闲中断和NVIC中断 3.编写MM32F0140 UART1中断接收和空闲中断函数 4.编写MM32F0140 UART1 ...

  9. laravel 框架增删改查+数据恢复

    ...............路由页面 //修改页面的自定义路由Route::post('unigoods/updata','uniGoodsController@updata');//数据恢复Rou ...

  10. 关于SQL Server 各种安装失败均失败,报错“等待数据库引擎恢复句柄失败”的经验分享

    最近安装SQL 2019遇到这个问题,试过自己合网上几乎所有办法,怎么都安装不上,最后在微软社区解决了,由于这个问题比较特殊,并且网上几乎没有正确的决绝方案,因此将我的解决过程及经验记录分享一下,也为 ...