最近没事写了个特别基础的多选框功能代码,代码如下:
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. MySql绿色版的安装

    MySql绿色版的安装 1.下载 2.配置环境变量,执行命令 mysqld --initialize-insecure --user=mysql 会创建出data文件夹 3.创建my.ini文件 [c ...

  2. java数组复习和内存分配

    Java基础知识复习 1.循环 1.1. for循环 for(int i =1;i<=10;i++){ System.out.println("Hello world"+i) ...

  3. Chapter02 Java概述

    Chapter02 Java概述 目录 Chapter02 Java概述 2.1 什么是程序 程序: 2.2 Java的重要特点 2.3 Java 运行机制及运行过程 2.3.1 Java 语言的特点 ...

  4. MM32F0020 UART1中断接收和UART1中断发送

    目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1和NVIC中断 3.编写MM32F0020 UART1使能中断发送函数 4.编写MM32F0020 UART1中断接收和中断 ...

  5. 实现同比、环比计算的N种姿势

    在做数据分析时,我们会经常听到同比.环比同比的概念.各个企业和组织在发布统计数据时,通常喜欢用同比.环比来和之前的历史数据进行比较,用来说明数据的变化情况.例如,统计局公布2022年1月份CPI同比增 ...

  6. Spring系列20:注解详解和Spring注解增强(基础内功)

    有部分小伙伴反馈说前面基于注解的Spring中大量使用注解,由于对Java的注解不熟悉,有点难受.建议总结一篇的Java注解的基础知识,那么,它来了! 本文内容 什么是注解? 如何定义注解 如何使用注 ...

  7. thinkphp5 composer安装phpexcel插件及使用

    1: 首先composer加载phpexcel插件 composer require phpoffice/phpexcel 2: 页面引入 use PHPExcel_IOFactory; use PH ...

  8. tp5实现邮件发送(无注释)

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. k8s命令行web代理神器gotty

    目录 介绍 安装 使用示例 -p 指定端口 -c 指定账号密码 -w 支持tty交互 --permit-arguments 支持get参数传参 --random-url 生成随机地址 --reconn ...

  10. 微信小程序 app.js globalData 赋值报错

    //success方法要用用success: res => {}的格式 success: res => { } //赋值报错 success:function(e){ } //报错内容: ...