选中div中的全部checkbox

最新推荐文章于 2020-08-03 11:39:14 发布

温智星

最新推荐文章于 2020-08-03 11:39:14 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： div input list javascript html asp

本文链接：https://blog.youkuaiyun.com/wenzhixing/article/details/1571257

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现复选框全选功能的方法。通过编写简单的JavaScript函数，可以轻松地控制一组复选框的状态，提高用户界面的交互性和可用性。这种技术特别适用于需要进行多项选择的表单或调查中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<body>
<script language="javascript">
function check(field,obj) {
var div=field;
var ckb=document.getElementsByTagName("INPUT");
if(obj.checked)
{
for(i=0;i<ckb.length;i++)
{
if(ckb[i].parentNode==div  && ckb[i].type=="checkbox")
ckb[i].checked=true;
}
}
else
{
for(i=0;i<ckb.length;i++)
{
if(ckb[i].parentNode==div  && ckb[i].type=="checkbox")
ckb[i].checked=false;
}
}
}
</script>
<form name=myform action="" method=post>
<b>请选择下面的选项</b><br>
<div id="div1">
<input type=checkbox name=list2 onClick="this.value=check(div1,this)" value="0">全选<br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
</div>
<p></p>
<div id="div2">
<input type=checkbox name=list2 onClick="this.value=check(div2,this)" value="0">全选<br>
<input type=checkbox name=list3 value="1">Java<br>
<input type=checkbox name=list3 value="2">JavaScript<br>
<input type=checkbox name=list3 value="3">ASP<br>
<input type=checkbox name=list3 value="4">HTML<br>
<input type=checkbox name=list3 value="5">SQL<br>
</div>
</form>
</body>
</html>