DOM操作复选框

时间：2017-11-09 22:49:19 阅读：370 评论：0 收藏：0 [点我收藏+]

标签：方法 on() this iss nload w3c boa == null

DOM操作复选框

实现一个效果如下图:
技术分享

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

下面我们来实现这个效果。
源代码:

[javascript] view plain copy

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

DOM操作复选框

标签：方法 on() this iss nload w3c boa == null

原文地址：http://www.cnblogs.com/liubin1988/p/7811238.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行