JS面试题年-月全选机试题

£轻描～淡写°

已于 2022-06-11 16:07:09 修改

阅读量291

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-05-29 20:10:10 首次发布

本文链接：https://blog.csdn.net/m0_60786924/article/details/125034907

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

在网上看面试题的时候，偶然看到，觉得很有意思，而且它的逻辑性思维也比较强，于是便想着做了出来，希望对大家能有帮助，代码可能不够简洁，还请各位大佬多多包涵，解题如果有其它意见，欢迎各位大佬来评论！

一、实现效果：

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>

£轻描～淡写°

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS面试题年-月全选机试题

目录前言：一、实现效果：二、思维导图：三、代码部分：前言：在网上看面试题的时候，偶然看到，觉得很有意思，而且它的逻辑性思维也比较强，于是便想着做了出来，希望对大家能有帮助，代码可能不够简洁，还请各位大佬多多包涵，解题如果有其它意见，欢迎各位大佬来评论！一、实现效果：JS全选效果二、思维导图：嗯，我们在做任何项目的时候，首先先把自己的思路理清楚，然后再去做，就可以极大提高效率。这里我使用的是XMind8免费版来绘制思维导图理清思路。......
复制链接

扫一扫