javascript实现全选择反选

来源：互联网发布：bugclose 源码下载编辑：程序博客网时间：2024/06/06 18:51

开始之前先上几张效果图：确保来人是想要这样的效果。

1.选择全部

2.取消全选

3.其中一个不勾选则取消全选的选中状态全部勾选时全选自动勾选

4.反向选择选项

5.接下来附上源码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title>Web01</title>
</head>
<body>
<ul>
<li>
<input name="selectAll" id="selectAll" type="checkbox"> 全选/取消    
<input name="selectContrary" id="selectContrary" type="checkbox"> 反选
</li>
<li>
<input name="optionChildren" value="A" type="checkbox"> option1
</li>
<li>
<input name="optionChildren" value="B" type="checkbox"> option2
</li>
<li>
<input name="optionChildren" value="C" type="checkbox"> option3
</li>
<li>
<input name="optionChildren" value="D" type="checkbox"> option4
</li>
<li>
<input name="optionChildren" value="E" type="checkbox"> option5
</li>
<li>
<input name="optionChildren" value="F" type="checkbox"> option6
</li>
</ul>
<div class="div-text">
javascript实现全选反选
</div>
</body>
</html>
<script type="text/javascript">
//Dome文档加载完毕后执行JS
window.onload=function(){

//获取所有的option（option1-option6）
var optionArray = document.getElementsByName("optionChildren");

/****************实现全部选择全部取消Start*******************/
//1.获取全选复选按钮 document.getElementsByName获取到的是个数组别忘了取下标
var selectAll = document.getElementsByName("selectAll")[0];
//2.为selectAll注册事件当selectAll选中时候则所有option被选中
selectAll.onclick = function(){
//获取当前复选按钮selectAll的选中状态
//一般为true/false 有时候可能为checkd
//如果isChecked的值为checked就用 ?: 转化为bool值例:isChecked =="checked"?true:false;
var isChecked = this.checked;
//将所有的option的选中状态与selectAll的选中状态同步
for(var optionIndex in optionArray){
optionArray[optionIndex].checked = isChecked;
}
}
/****************实现全部选择全部取消End*******************/

/****************实现反向选择Start*******************/
//1.获取反选复选按钮通过ID获取所以不用取下标
var selectContrary = document.getElementById("selectContrary");
//2.为selectContrary注册事件当selectContrary选中时候则所有option被选中
selectContrary.onclick = function(){
//3.将所有的状态标记为相反的状态
for(var optionIndex in optionArray){
//4.获取当前状态
var childrenChecked = optionArray[optionIndex].checked;
//5.设置选中状态与原本状态相反
optionArray[optionIndex].checked = !childrenChecked;
}
}
/****************实现反向选择End*******************/

/****************实现自动勾选全选按钮Start*******************/
//1.遍历选项option数组
for(var optionIndex in optionArray){
//2.对每个option注册单击事件每次都判断是否选择了全部
optionArray[optionIndex].onclick = function(){
//3.重新获取的复选按钮（数组）
var newOptionArray = document.getElementsByName("optionChildren");
//4.假定每个都为未选中状态
var isAllChecked = true;
//5.遍历newOptionArray数组判断每个name="option"的checked状态
for(var keys=0;keys<newOptionArray.length;keys++){
console.log(newOptionArray[keys])
//6.若其中一个不被选中就break循环
if(newOptionArray[keys].checked == false){
isAllChecked = false;
break;
}
}
//设置全选复选按钮的选中状态
selectAll.checked = isAllChecked;
}
}
/****************实现自动勾选全选按钮End*******************/
}
</script>

使用到的css文件代码

/*文字li样式*/
ul li{
color:#7B7B7B;
font-size: 20px;
}
/*文字DIV样式*/
.div-text{
color:#7B7B7B;
font-size:40px;
}

代码里面都有流程注释的

这是资源地址，不想自己写的同学就附上1积分吧

http://download.csdn.net/download/microsoftdesigner/9930046

希望大家在编程的道路上越滚越远~~~

阅读全文

0 0