js实现全选和反选功能
2016-07-15 20:01
661 查看
<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>
//选中全选按钮,下面的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>
相关文章推荐
- JS简介
- JSP
- JavaScript:立即执行的函数表达式
- [Effective JavaScript 笔记]第61条:不要阻塞I/O事件队列
- JavaScript实现拖拽预览,AJAX小文件上传
- JavaScript实现拖拽预览,AJAX小文件上传
- javascript实现图片隐写
- JavaScript八张思维导图概括
- html5与JavaScript脚本的六位彩票随机数字算法
- VS2015使用pjsip库编译一个helloworld工程
- json序列化时datetime的处理方法
- extjs实用页面布局
- 获取网页URL地址及参数等的两种方法(js和C#)
- js笔记2
- JavaScript的open()方法:打开新窗口
- 5个你必须知道的JavaScript和Web Debug技术
- C 实现解析Json字符串
- javascript语句——条件语句、循环语句和跳转语句
- 总结一下,最近工作中的问题
- javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法