提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

复选框全选与全不选操作实现思路

思路 实现 操作 全选 复选框 全不选
2023-06-13 09:15:04 时间
复制代码代码如下:

<SPANstyle="FONT-SIZE:14px"><!DOCTYPEhtml>
<html>
<head>
<title>复选框处理.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
</head>
<body>
<inputtype="checkbox"id="checkItem">全选/全不选
<br>
<h3>爱好</h3>
<inputtype="checkbox"name="item">看书
<br>
<inputtype="checkbox"name="item">听音乐
<br>
<inputtype="checkbox"name="item">打球
<br>
<inputtype="checkbox"name="item">散步
<br>
<inputtype="checkbox"name="item">写代码
<br>
<script>
window.onload=function(){
varcheckItem=document.getElementById("checkItem").onclick=function(){
varitemsElement=document.getElementsByName("item");
for(vari=0;i<itemsElement.length;i++){
varitemElement=itemsElement[i];
if(this.checked){
itemElement.checked="checked";
}
else{
itemElement.checked=null;
}
}
}
}
</script>
</body>
</html>
</SPAN>

相关文章