杨老师课堂之JavaScript案例全选、全不选、及反选
JavaScript案例之全选、全不选、及反选效果图：
思路：
1.先做界面
1.1制作按钮
1.2制作复选框
2..JavaScript
3.1根据不同的标签名称去获取不同的元素
3.2当第一个按钮--全选--被单击 会 触发一个函数，此函数涉及到复选框全部选中功能，但是复选框一共有多少个是未知的，所以我们要去做一个循环，进行遍历得到有多少个复选框 【定义变量、循环条件、循环环境】
3.3通过循环使得每一个复选框都会处于被选中状态，即为true、反之亦然！
3.4反选：依旧采用循环去获取复选框的个数，进行判断：
判断条件是：当某一个复选框被选中后，
执行内容为： 其余复选框全部处于被选中状态下，即反选！
3.5判断：当图片到达最后一张，将图片变量重置为0，进行循环递加到原图的图片名称1上去
参考代码：
Html代码
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<br />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />JavaScript代码
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementsByTagName('button');
var oinput = document.getElementsByTagName('input');
oBtn[0].onclick = function(){
for(var i = 0;i<oinput.length;i++){
oinput[i].checked =true;
}
}
oBtn[1].onclick = function(){
for(var i = 0;i<oinput.length;i++){
oinput[i].checked = false;
}
}
oBtn[2].onclick = function(){
for(var i = 0;i<oinput.length;i++){
if(oinput[i].checked == true){
oinput[i].checked = false;
}else{
oinput[i].checked = true;
}
}
}
}
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年04月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
