html5判断多选框是否选择的函数,复选框(checkbox)、多选框
1、需求分析
可同时选中多个选项,实现全选、全不选、反选等功能。
2、技术分析
基础的HTML、CSS、JavaScript。
3、详细分析
3.1 HTML部分
图示是一个列表加底部一段文字说明,列表包含三个部分,整体是一个多选列表,上部是总的选项,下面是具体选项,因此该列表是一个自定义列表:
全选
/*给"反选"建立js链接,实现动态效果*/
反选
/*选项由选择框(输入框)和标示构成,所以使用标签和标签,label 元素不会呈现任何特殊效果。如果在 label 元素内点击文本,就会触发此控件*/
选项1
选项2
选项3
选项4
选项5
选项6
选项7
选项8
1、切换全选全不选文字2、根据选中个数更新全选框状态
3.2 CSS部分
/*浏览器格式化,消除页面预留空间*/
*{
margin: 0;
padding: 0;
}
/*适应各种浏览器屏幕尺寸*/
body{
width: 100%;
height: 100%;
/*设置页面字体大小*/
font-size: 14px;
}
/*列表内元素垂直居中*/
label,input,a{vertical-align:middle;}
/*给选项表示设置内边距*/
label{padding:0 10px 0 5px;}
/*给列表设置边框*/
dl{
width: 120px;
/*元素水平居中*/
margin: 10px auto;
border: 1px solid #666;
/*设置边框圆角*/
border-radius: 5px;
background: #fafafa;
padding: 10px 5px;
}
/*消除链接下划线,设置链接字体颜色*/
a{
text-decoration: none;
color: #09f;
}
/*鼠标指针浮动在链接上时,样式改变:字体变红色*/
a:hover{
color: red;
}
dt{
/*下边框*/
border-bottom: 1px solid black;
/*距离底部内边距*/
padding-bottom: 10px;
}
/*标示字体加粗*/
dt label{
font-weight: 700;
}
/*各个选项距离顶部外边距*/
p{
margin-top: 10px;
}
3.3 JS部分
window.οnlοad=function(){//网页加载完成后调用函数
var oA=document.getElementsByTagName("a")[0];//获取第一个a元素,即链接"反选"
var oInput=document.getElementsByTagName("input");//获取所有的输入选择框
var oLabel=document.getElementsByTagName("label")[0];//获取第一个lable标签,lable标签为input标签定义标记,即"全选"选项。
var isCheckAll=function( ){//声明一个全选函数
for(var i=1,n=0;i
oInput[i].checked && n++//没选择一个选项,则n增加1,n=已选的项目数
}
oInput[0].checked=n==oInput.length-1;//选择第一个选项=选择第一个项目之外的全部选项,所以点击全选的同时,其他所有选项一并选中。
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"//innerHtml改变第一个标签"全选'的元素内容,后面为判断语句:选择"全选"时,全选变为全不选,
否则为全选。
};
oInput[0].οnclick=function(){//给第一个选项"全选"绑定点击函数事件,点击全选时,执行函数
for(var i=1;i
oInput[i].checked=this.checked//当点击第一个"全选"选项时,执行循环函数:遍历选择每个选项,即点击全选时,所有选项都选择,实现全选,同理实现全不选,
这里的this即为oInput[0],将第一个input的checked值赋给每一个input元素。
}
isCheckAll()
};
oA.οnclick=function(){//给"反选"绑定点击事件,当点击反选时,执行相应函数事件
for (var i = 1; i < oInput.length; i++){
oInput[i].checked=!oInput[i].checked//点击反选,已选变未选,未选变已选,!为否定
};
}
for (var i = 1; i < oInput.length; i++) {//点击改变元素
oInput[i].οnclick=function(){
isCheckAll()//oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选",根据选中个数更新全选框状态,当全选后,全选切换为全不选。
};
}
}
更多专业前端知识,请上
【猿2048】www.mk2048.com
html5判断多选框是否选择的函数,复选框(checkbox)、多选框相关推荐
- 虚拟服务器的常用服务器选什么,如何选择合适的虚拟主机,虚拟主机选什么系统...
原标题:如何选择合适的虚拟主机,虚拟主机选什么系统 虚拟主机费用低.无需繁琐的环境配置,是新手建站.小型网站.博客的合适选择之一.市面上的虚拟主机五花八门,linux主机.windows主机.java ...
- 单元格下拉全选快捷键_excel选择技巧:怎么样用快捷方式进行全选操作
在Excel中选择工作表是一个基础操作,不过还是有些同学掌握不全面的.Excel全选快捷键是否你只知道CTRL+A? 本篇教程,我们就一起来重温一下,看看你是否真的都知道. 第一:光标定位在有数据的区 ...
- 域名该怎样选_域名选择策略有哪些(教你如何选一个好的域名)
域名是联接企业和互联网网址的纽带, 它像品牌.商标一样具有重要的识别作用, 是访问者通达企业网站的"钥匙", 是企业在网络上存在的标志, 担负着标示站点和导向企业站点的双重作用.企 ...
- 使用VUE对复选框进行选择
实现的功能就是,选中几个复选框,能够返回这几个复选框所在行的管理员用户名.点击全选能够全选,能够返回复选框所在行的管理员用户名. 先来看一下HTML <tbody><tr v-for ...
- 复选框全选效果,根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果 逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
- php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择 在jQuery中,选中checkbox通用的两种方式 ...
- fluent design_Fluent Design单选按钮,复选框,选择框,Java菜单
fluent design 这次我对JMetro进行了重大更新. 3.8版带来了以下新的Fluent Design (FDS)启发风格(深色和浅色)和更新: 新的单选按钮样式: 复选框的新样式: 菜单 ...
- Fluent Design单选按钮,复选框,选择框,Java菜单
这次我对JMetro进行了重大更新. 3.8版引入了以下新的Fluent Design (FDS)启发风格(深色和浅色)和更新: 新的单选按钮样式: 复选框的新样式: 菜单的新样式: 更新了上下文菜单 ...
- fluent_Fluent Design单选按钮,复选框,选择框,Java菜单
fluent 这次我对JMetro进行了重大更新. 3.8版带来了以下新的Fluent Design (FDS)启发风格(深色和浅色)和更新: 新的单选按钮样式: 复选框的新样式: 菜单的新样式: 更 ...
最新文章
- 青年生命科学论坛报告:扩增子和宏基因组数据分析与可视化流程—刘永鑫(北京210606)...
- 《算法导论》学习总结 — 13. 第13章 红黑树(2)
- win2000堆的调试
- dubbo控制中心部署,权重配置,以及管控台中各个配置的简单查看
- 多线程下C#如何保证线程安全?
- [C#]我自己写的一个对字节中每位进行修改值的函数
- linux bash命令找不到,Linux下提示命令找不到:bash:command not found
- Java虚拟机JVM的内部体系结构
- Spring Cloud Gateway (六) 自定义 Global Filter
- linux下sybase创建数据库,sybase数据库环境搭建教程(多图教程)
- 计算机毕业设计java+jsp学科竞赛管理系统(源码+系统+mysql数据库+Lw文档)
- 网站域名备案备注怎么写
- 经此一疫,互联网公司格局发生了哪些变化?
- [HNOI2002] 沙漠寻宝题解
- 折腾笔记--Linux和Windows10双系统安装的一般步骤(通用)(物理机安装)
- DOTA~杀人声音,英雄台词
- 部署springboot+vue项目文档(若依ruoyi项目部署步骤)
- 红米6.apk软件安装失败:其他原因
- 学习笔记:python人脸识别4-考勤系统
- 开发出差申请审批单时碰到的问题
热门文章
- android ndk 9,Android NDK:警告:APP_PLATFORM android-9大于android:minSdkVersion 8
- php 织梦模板 防盗,dedecms 软件下载频道防盗链php代码
- jfinal html5,Jfinal框架整合webSocket技术功能实现
- flowable springboot 集成 flowableDMN_05
- 关于JDK8采坑JCE加密限制版本问题
- 使用IntelliJ IDEA 2019.3.2 x64 远程连接oracle数据库
- 工作流实战_10_flowable 流程实例的删除
- 解决由于没有办理权限导致的403,权限不足
- linux 下载mysql5.7.22
- 系统架构设计师 - 软件架构设计 - 架构评估