您的位置：首页 > 其它

09-Dom操作复选框（全选、全不选、反选）

2015-10-08 17:43 169 查看

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!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>Insert title here</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="checkall_revsern" value="反选"/>
</body>
<script type="text/javascript">
window.onload = function(){
//全选
document.getElementById("checkall").onclick = function(){
var itemElements = document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
//方法一
//itemElements[i].setAttribute("checked","checked");
//方法二
itemElements[i].checked = "checked";
}
}
//全不选
document.getElementById("checkallNo").onclick = function(){
var itemElements = document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
//方法一(IE可以其他不可以)
//itemElements[i].setAttribute("checked", null);
//方法二(都可以)
itemElements[i].checked = null;
}
}
//反选
document.getElementById("checkall_revsern").onclick = function(){
var itemElements = document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
var itemElement = itemElements[i];
if (itemElement.checked) {
itemElement.checked = null;
}
else {
itemElement.checked = "checked";
}
}
}

//全选
document.getElementById("checkItems").onclick = function(){
var itemElements = document.getElementsByName("items");
for (var i = 0; i < itemElements.length; i++) {
var itemElement = itemElements[i];
if (this.checked) {
itemElement.checked = "checked";
}
else {
itemElement.checked = null;
}
}
}
}
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航