js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码
分类:网络编程 作者:小羽 发布时间:2018-05-28 22:12:30 点击次数:3272
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
</head>
-
<body>
-
<h1>你的呢爱好很广泛!!</h1>
-
<br>
-
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
-
<br>
-
<input type="checkbox" name="items" value="足球">足球
-
<input type="checkbox" name="items" value="篮球">篮球
-
<input type="checkbox" name="items" value="游泳">游泳
-
<input type="checkbox" name="items" value="唱歌">唱歌
-
<br>
-
<input type="button" name="checkall" id="checkall" value="全选">
-
<input type="button" name="checkall" id="checkNo" value="全不选">
-
<input type="button" name="checkall" id="checkReverse" value="反选">
-
<script type="text/javascript">
-
-
// 处理全选
-
document.getElementById('checkall').onclick=function(){
-
/*************************************************/
-
// 获取所有的复选框
-
var checkElements=document.getElementsByName('items');
-
for(var i=0;i<checkElements.length;i++){
-
var checkElement=checkElements[i];
-
// 方法一
-
// checkElement.setAttribute('checked',' checked');
-
// 方法二
-
checkElement.checked="checked";
-
}
-
}
-
/*************************************************/
-
// 处理全不选
-
document.getElementById('checkNo').onclick=function(){
-
// 获取所有的复选框
-
var checkElements=document.getElementsByName('items');
-
for(var i=0;i<checkElements.length;i++){
-
var checkElement=checkElements[i];
-
// 方法一火狐不支持
-
// checkElement.setAttribute('checked',null);
-
// 方法二 火狐和ie都支持
-
checkElement.checked=null;
-
}
-
}
-
/******************************************************************/
-
//反选
-
document.getElementById('checkReverse').onclick=function(){
-
// 获取所有的复选框
-
var checkElements=document.getElementsByName('items');
-
for(var i=0;i<checkElements.length;i++){
-
var checkElement=checkElements[i];
-
if (checkElement.checked) {
-
checkElement.checked=null;
-
}
-
else{
-
checkElement.checked="checked";
-
}
-
// 方法一
-
// checkElement.setAttribute('checked',null);
-
// 方法二 火狐和ie都支持
-
-
}
-
}
-
/***********************************************************/
-
//全选/不选
-
document.getElementById('checkItems').onclick=function()
-
{
-
// 获取所有的复选框
-
var checkElements=document.getElementsByName('items');
-
if (this.checked) {
-
for(var i=0;i<checkElements.length;i++){
-
var checkElement=checkElements[i];
-
checkElement.checked="checked";
-
}
-
-
}
-
else{
-
for(var i=0;i<checkElements.length;i++){
-
var checkElement=checkElements[i];
-
checkElement.checked=null;
-
}
-
}
-
-
}
-
</script>
-
</body>
-
</html>