复选框（checkbox）、多选框 |
您所在的位置：网站首页 › 复选框是什么形状 › 复选框（checkbox）、多选框 |
复选框（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.onload=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 |
【本文地址】
今日新闻 |
推荐新闻 |