目录
前言:
在网上看面试题的时候,偶然看到,觉得很有意思,而且它的逻辑性思维也比较强,于是便想着做了出来,希望对大家能有帮助,代码可能不够简洁,还请各位大佬多多包涵,解题如果有其它意见,欢迎各位大佬来评论!
一、实现效果:
JS全选效果
二、思维导图:
嗯,我们在做任何项目的时候,首先先把自己的思路理清楚,然后再去做,就可以极大提高效率。这里我使用的是XMind8免费版来绘制思维导图理清思路。
三、代码部分:
本篇文章内容,使用的是HBuilder X网页编程工具
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面试全选案例</title>
</head>
<!-- js代码 -->
<script type="text/javascript">
//编号获取对象 $();方法
function $(id){
return document.getElementById(id);
}
//class属性获取对象数组 getClass();
function getClass(obj){
return document.getElementsByClassName(obj);
}
//name属性获取对象数组getName();
function getName(obj){
return document.getElementsByName(obj);
}
//其它复选框
let cks = getClass("oncks");
//alert(all);
//年份
let years = getClass("year");
//console.log(years);
//月份
let months = getClass("month");
//所有复选框
let ckss = getName("cks");
function cksonclick(){
for(var d=0; d<cks.length; d++){
cks[d].onclick=function(){
var flag = true;
if(this.checked===false){
flag=false;
//console.log(this);
}
//月
var Tmonth =this.value.substring(4,6);
//年
var Tyear =this.value.substring(0,4);
if(flag===false){
//遍历年份
for(var e=0; e<years.length; e++){
if(years[e].value==Tyear){
years[e].checked=false;
break;
}
}
//遍历月份
for(var f=0; f<months.length; f++){
if(months[f].value==Tmonth){
months[f].checked=false;
break;
}
}
}else{
//遍历年份
var yearTnum;
for(var e=0; e<years.length; e++){
if(years[e].value==Tyear){
yearTnum = years[e];
break;
}
}
//console.log(yearTnum)
//遍历所有的其它复选框
var sum = 0;
for(var h=0; h<cks.length; h++){
//console.log(years[e]);
//console.log(cks[h].value)
//年
var Tyear =cks[h].value.substring(0,4);
if(Tyear==yearTnum.value){
if(cks[h].checked==true){
//console.log(cks[h].value)
sum++;
}
}
}
if(6==sum){
yearTnum.checked=true;
}else{
yearTnum.checked=false;
}
//遍历月份
var monthTnum;
for(var t=0; t<months.length; t++){
if(months[t].value==Tmonth){
monthTnum = months[t];
break;
}
}
//console.log(yearTnum)
//遍历所有的其它复选框
var monthsum = 0;
for(var h=0; h<cks.length; h++){
//console.log(years[e]);
//console.log(cks[h].value)
//月
var Tmonth=cks[h].value.substring(4,6);
if(Tmonth==monthTnum.value){
if(cks[h].checked==true){
//console.log(cks[h].value)
monthsum++;
}
}
}
if(6==monthsum){
monthTnum.checked=true;
}else{
monthTnum.checked=false;
}
}
//全选优化
var flagtrue = true;
for(var g =0; g<ckss.length; g++){
if(ckss[g].checked==false){
flagtrue=false;
}
}
$("all").checked=flagtrue;
}
}
}
//加载函数
window.onload=function(){
//全选
let all = $("all");
//1.设置全选的点击事件
all.onclick=function(){
//alert(123);
//遍历所有复选框
for(var i=0; i<ckss.length; i++){
//都跟随全选
ckss[i].checked=all.checked;
}
}
//4.设置其它复选框的点击事件
//alert(cks);
cksonclick();
}
//2.搞定当我选中指定月的时候全部都选中
//obj代表当前的对象
function Tmonth(obj,flag){
//获取月的对象
for(var i =0; i<cks.length; i++){
//拿到所有月份的value值
var Tmon =cks[i].value;
var Tsub =Tmon.substring(4,6);
//从第几位到第几位
// console.log(Tsub);
//到指定的位置开始截取几位
// console.log(Tmon.substr(4,2));
//进行筛选
if(Tsub===flag){
//得到了指定的数据
//控制对应的checked
cks[i].checked=obj.checked;
}
}
//保存每一次年份是否选中
var monthssum = 0;
//判断年份是否选中
if(obj.checked===true){
//遍历所有的月份
for(var c =0; c<months.length; c++){
//type(months[c].checked);
if(months[c].checked===true){
//console.log(months[c]);
//alert(1);
monthssum++;
}
}
}else{
//遍历所有年份
for(var b =0; b<years.length; b++){
years[b].checked=false;
//全选取消选中
all.checked=false;
}
}
//遍历所有的年份
for(var aa =0; aa<years.length; aa++){
//遍历所有的其它复选框
let numyear = 0;
for(var bb = 0; bb<cks.length; bb++){
if(years[aa].value==cks[bb].value.substring(0,4)){
if(cks[bb].checked==true){
numyear++;
}
}
}
if(numyear==6){
years[aa].checked=true;
}
}
//判断是否全部选中
if(monthssum==months.length){
//遍历所有年份
for(var a =0; a<years.length; a++){
years[a].checked=true;
//全选选中
all.checked=true;
}
}
}
//3.设置年份控制的(当年份选中时,关于本年度的都选中)
//obj代表当前的对象
function Tyear(obj,type){
//获取所有的对象
for(var i =0; i<cks.length; i++){
//得到velue值
var Tyear =cks[i].value;
//进行指定的内容截取
var Tsub =Tyear.substring(0,4);
//进行筛选
if(Tsub===type){
//得到指定数据,控制checked属性
cks[i].checked=obj.checked;
}
}
//保存每一次年份是否选中
var yearssum = 0;
//判断年份是否选中
if(obj.checked===true){
//遍历所有的年份
for(var c =0; c<years.length; c++){
//type(years[c].checked);
if(years[c].checked===true){
//console.log(years[c]);
//alert(1);
yearssum++;
}
}
}else{
//遍历所有月份
for(var b =0; b<months.length; b++){
months[b].checked=false;
//全选取消选中
all.checked=false;
}
}
//遍历所有的月份
for(var aa =0; aa<months.length; aa++){
//遍历所有的其它复选框
let num = 0;
for(var bb = 0; bb<cks.length; bb++){
if(months[aa].value==cks[bb].value.substring(4,6)){
if(cks[bb].checked==true){
num++;
}
}
}
console.log(num);
if(num==6){
months[aa].checked=true;
}
}
//判断是否全部选中
if(yearssum==years.length){
//遍历所有月份
for(var a =0; a<months.length; a++){
months[a].checked=true;
//全选选中
all.checked=true;
}
}
}
</script>
<body>
<center>
<table border="1px" cellspacing="0px" cellpadding="0px" style="text-align: center;" width="30%" id="" >
<tr>
<td>全选<input type="checkbox" name="" id="all" value="" /></td>
<td>一月<input onclick="Tmonth(this,'01');"; type="checkbox" name="cks" class="month" id="a" value="01" /></td>
<td>二月<input onclick="Tmonth(this,'02');"; type="checkbox" name="cks" class="month" id="b" value="02" /></td>
<td>三月<input onclick="Tmonth(this,'03');"; type="checkbox" name="cks" class="month" id="c" value="03" /></td>
<td>四月<input onclick="Tmonth(this,'04');"; type="checkbox" name="cks" class="month" id="d" value="04" /></td>
<td>五月<input onclick="Tmonth(this,'05');"; type="checkbox" name="cks" class="month" id="e" value="05" /></td>
<td>六月<input onclick="Tmonth(this,'06');"; type="checkbox" name="cks" class="month" id="f" value="06" /></td>
</tr>
<tr>
<td>2008年 <input onclick="Tyear(this,'2008')"; type="checkbox" class="year" name="cks" id="aa" value="2008" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200801" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200802" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200803" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200804" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200805" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200806" /></td>
</tr>
<tr>
<td>2009年 <input onclick="Tyear(this,'2009')"; type="checkbox" class="year" name="cks" id="bb" value="2009" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200901" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200902" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200903" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200904" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200905" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="200906" /></td>
</tr>
<tr>
<td>2010年 <input onclick="Tyear(this,'2010')"; type="checkbox" class="year" name="cks" id="cc" value="2010" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201001" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201002" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201003" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201004" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201005" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201006" /></td>
</tr>
<tr>
<td>2011年 <input onclick="Tyear(this,'2011')"; type="checkbox" class="year" name="cks" id="dd" value="2011" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201101" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201102" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201103" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201104" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201105" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201106" /></td>
</tr>
<tr>
<td>2012年 <input onclick="Tyear(this,'2012')"; type="checkbox" class="year" name="cks" id="ee" value="2012" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201201" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201202" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201203" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201204" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201205" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201206" /></td>
</tr>
<tr>
<td>2013年 <input onclick="Tyear(this,'2013')"; type="checkbox" class="year" name="cks" id="ff" value="2013" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201301" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201302" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201303" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201304" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201305" /></td>
<td><input type="checkbox" name ="cks" class="oncks" id="" value="201306" /></td>
</tr>
</table>
</center>
</body>
</html>