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

【JavaScript】DOM操作复选框

2015-08-26 21:05 706 查看

DOM操作复选框

实现一个效果如下图:

点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。

下面我们来实现这个效果。

源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>

</head>
<body>
您的爱好很广泛!!!
<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="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
<script language="javascript">
window.onload=function(){
//实现全选
document.getElementById("checkall").onclick=function(){
var itemElements=document.getElementsByName("items");
for(var i=0;i<itemElements.length;i++){
//方法1
//itemElements[i].setAttribute("checked","checked");
//方法2
itemElements[i].checked="checked";
}
}
//实现全不选
document.getElementById("checkallNo").onclick=function(){
var itemElements=document.getElementsByName("items");
for(var i=0;i<itemElements.length;i++){
//方法1,IE可以，其他浏览器不支持
//itemElements[i].setAttribute("checked",null);
//方法2,都行
itemElements[i].checked=null;
}
}
//实现反选
document.getElementById("check_revsern").onclick=function(){
var itemElements=document.getElementsByName("items");
for(var i=0;i<itemElements.length;i++){

//itemElements[i].checked:如果选中为true，否则false
if(itemElements[i].checked){
itemElements[i].checked=null;
}else{
itemElements[i].checked="checked";
}
}
}
//全选/全不选复选框的功能
document.getElementById("checkItems").onclick=function(){
var itemElements=document.getElementsByName("items");
for(var i=0;i<itemElements.length;i++){

//itemElements[i].checked:如果选中为true，否则false
if(this.checked){
itemElements[i].checked=null;
}else{
itemElements[i].checked="checked";
}
}
}
}
</script>
</html>

写完了，是不是很简单？哈哈

转载请注明出处：http://blog.csdn.net/acmman/article/details/48010131

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

标签：

相关文章推荐

新的分享

章节导航