您的位置：首页 > Web前端 > JavaScript

js实现全选和反选功能

2015-12-12 20:57 756 查看

最近没事做，就用js写了一个复选框选择全选时，下面的按钮也都会选择上，当下面的选框被全选时，全选按钮也会被选中;还实现了一个反选功能，可供大家参考，如果大家有好的建议也可以给我留言，我们一起学习...

<script language="javascript">

//选中全选按钮，下面的checkbox全部选中

var selAll = document.getElementById("selAll");

function selectAll()

{

var obj = document.getElementsByName("checkAll");

if(document.getElementById("selAll").checked == false)

{

for(var i=0; i<obj.length; i++)

{

obj[i].checked=false;

}

}else

{

for(var i=0; i<obj.length; i++)

{

obj[i].checked=true;

}

}

}

//当选中所有的时候，全选按钮会勾上

function setSelectAll()

{

var obj=document.getElementsByName("checkAll");

var count = obj.length;

var selectCount = 0;

for(var i = 0; i < count; i++)

{

if(obj[i].checked == true)

{

selectCount++;

}

}

if(count == selectCount)

{

document.all.selAll.checked = true;

}

else

{

document.all.selAll.checked = false;

}

}

//反选按钮

function inverse() {

var checkboxs=document.getElementsByName("checkAll");

for (var i=0;i<checkboxs.length;i++) {

var e=checkboxs[i];

e.checked=!e.checked;

setSelectAll();

}

}

</script>

<html>

<body>

<center>

<input type="checkbox" id="selAll" onclick="selectAll();" />全选

<input type="checkbox" id="inverse" onclick="inverse();" />反选

<div id="allcheck">

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br>

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br>

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br>

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br>

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br>

<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br>

</div>

</center>

</body>
</html>

思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

JS代码：

1 <script>
2 window.onload=function(){
3     var CheckAll=document.getElementById('All');
4     var UnCheck=document.getElementById('uncheck');
5     var OtherCheck=document.getElementById('othercheck');
6     var div=document.getElementById('div');
7     var    CheckBox=div.getElementsByTagName('input');
8     CheckAll.onclick=function(){
9             for(i=0;i<CheckBox.length;i++){
10                     CheckBox[i].checked=true;
11                 };
12         };
13     UnCheck.onclick=function(){
14             for(i=0;i<CheckBox.length;i++){
15                     CheckBox[i].checked=false;
16                 };
17         };
18     othercheck.onclick=function(){
19             for(i=0;i<CheckBox.length;i++){
20                     if(CheckBox[i].checked==true){
21                             CheckBox[i].checked=false;
22                         }
23                     else{
24                         CheckBox[i].checked=true
25                         }
26
27                 };
28         };
29 };
30 </script>

HTML代码：

1 全选：<input type="button" id="All" value="全选" /><br />
2 不选<input type="button" id="uncheck" value="不选" /><br />
3 反选<input type="button" id="othercheck" value="反选" /><br />
4 <div id="div">
5     <input type="checkbox" /><br />
6     <input type="checkbox" /><br />
7     <input type="checkbox" /><br />
8     <input type="checkbox" /><br />
9     <input type="checkbox" /><br />
10     <input type="checkbox" /><br />
11     <input type="checkbox" /><br />
12     <input type="checkbox" /><br />
13     <input type="checkbox" /><br />
14     <input type="checkbox" /><br />
15     <input type="checkbox" /><br />
16     <input type="checkbox" /><br />
17     <input type="checkbox" /><br />
18     <input type="checkbox" /><br />
19     <input type="checkbox" /><br />
20     <input type="checkbox" /><br />
21     <input type="checkbox" /><br />
22     <input type="checkbox" /><br />
23     <input type="checkbox" /><br />
24     <input type="checkbox" /><br />
25 </div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航