itemelem.setAttribute("checked","checked");

HTML页面元素操作示例

最新推荐文章于 2025-11-27 12:57:01 发布

最新推荐文章于 2025-11-27 12:57:01 发布 · 141 阅读

文章标签：

#javascript #ViewUI

本文提供了一个HTML页面示例，展示了如何使用JavaScript来控制页面上的复选框元素，包括全选、全不选及反选功能。通过简单的代码实现，帮助读者理解网页交互的基本原理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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">
//<input type="button" name="checkall" id="checkall" value="全选" />
document.getElementById("checkall").onclick=checkall;

//<input type="button" name="checkall" id="checkallNo" value="全不选" />
document.getElementById("checkallNo").onclick=checkallNo;
//<input type="button" name="checkall" id="check_revsern" value="反选" />
document.getElementById("check_revsern").onclick=function (){
/*
* <input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
*/
var itemselems=document.getElementsByName("items");

for(var i=0;i<itemselems.length;i++){
var itemele=itemselems[i];
if(itemele.getAttribute("checked")){
//选中
itemele.setAttribute("checked",null);
}else{
itemele.checked="checked";
}
}

}

//<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选

document.getElementById("checkItems").onclick=function (){
if(this.getAttribute("checked")){
//全选中
// alert("tfy");
checkall();
}else{
checkallNo;
}
}
function checkall(){
/*
* <input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
*/

var itemelems=document.getElementsByName("items");

for(var j=0;j<itemelems.length;j++){

var itemelem=itemelems[j];
itemelem.setAttribute("checked","checked");
// alert("tfy");
}

}

/*
* <input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
*/
function checkallNo(){
var itemelems=document.getElementsByName("items");
for(var j=0;j<itemelems.length;j++){
var itemelem=itemelems[j];
itemelem.setAttribute("checked",null);
}

}
</script>
</html>