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

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

2016-09-01 21:13 585 查看

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下：

<!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>

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

标签： 全选反选框

相关文章推荐

新的分享

章节导航