`
1154934572
  • 浏览: 65227 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

js实现全选和反选功能

 
阅读更多
   最近没事做，就用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>

0
顶
0
踩
分享到：
| js创建表格和删除表格中的行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics