织梦 做网站 知乎,学前端的十大忠告,WordPress的MySQL搭建,福布斯中国100名人榜1、需求分析可同时选中多个选项#xff0c;实现全选、全不选、反选等功能。2、技术分析基础的HTML、CSS、JavaScript。3、详细分析3.1 HTML部分图示是一个列表加底部一段文字说明#xff0c;列表包含三个部分#xff0c;整体是一个多选列表#xff0c;上部是总的选项#…1、需求分析可同时选中多个选项实现全选、全不选、反选等功能。2、技术分析基础的HTML、CSS、JavaScript。3、详细分析3.1 HTML部分图示是一个列表加底部一段文字说明列表包含三个部分整体是一个多选列表上部是总的选项下面是具体选项因此该列表是一个自定义列表全选/*给反选建立js链接实现动态效果*/反选/*选项由选择框(输入框)和标示构成所以使用标签和标签,label 元素不会呈现任何特殊效果。如果在 label 元素内点击文本就会触发此控件*/选项1选项2选项3选项4选项5选项6选项7选项81、切换全选全不选文字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οadfunction(){//网页加载完成后调用函数var oAdocument.getElementsByTagName(a)[0];//获取第一个a元素即链接反选var oInputdocument.getElementsByTagName(input);//获取所有的输入选择框var oLabeldocument.getElementsByTagName(label)[0];//获取第一个lable标签lable标签为input标签定义标记即全选选项。var isCheckAllfunction( ){//声明一个全选函数for(var i1,n0;ioInput[i].checked n//没选择一个选项则n增加1n已选的项目数}oInput[0].checkednoInput.length-1;//选择第一个选项选择第一个项目之外的全部选项所以点击全选的同时其他所有选项一并选中。oLabel.innerHTML oInput[0].checked ? 全不选 : 全选//innerHtml改变第一个标签全选的元素内容后面为判断语句选择全选时全选变为全不选否则为全选。};oInput[0].οnclickfunction(){//给第一个选项全选绑定点击函数事件,点击全选时执行函数for(var i1;ioInput[i].checkedthis.checked//当点击第一个全选选项时执行循环函数:遍历选择每个选项即点击全选时所有选项都选择实现全选同理实现全不选这里的this即为oInput[0]将第一个input的checked值赋给每一个input元素。}isCheckAll()};oA.οnclickfunction(){//给反选绑定点击事件当点击反选时执行相应函数事件for (var i 1; i oInput.length; i){oInput[i].checked!oInput[i].checked//点击反选已选变未选未选变已选!为否定};}for (var i 1; i oInput.length; i) {//点击改变元素oInput[i].οnclickfunction(){isCheckAll()//oLabel.innerHTML oInput[0].checked ? 全不选 : 全选根据选中个数更新全选框状态当全选后全选切换为全不选。};}}更多专业前端知识请上【猿2048】www.mk2048.com
