复选框父级和子级的联动

最新推荐文章于 2021-08-11 10:25:43 发布

Zeashon

最新推荐文章于 2021-08-11 10:25:43 发布

阅读量1.6k

点赞数

分类专栏：前端开发_JS 文章标签： checkbox javascript 复选框

本文链接：https://blog.csdn.net/u013157684/article/details/37954723

版权

这篇博客介绍了一种使用JavaScript实现的复选框父子级联动功能，当子级复选框被选中或取消时，其对应的父级复选框会自动更新状态。内容包括一个HTML示例和JavaScript代码，展示了如何通过遍历DOM结构来检查和设置复选框的状态。读者可以通过运行示例代码来体验和理解这一功能。

摘要由CSDN通过智能技术生成

具体功能就是实现当子级被选中时相应的父级也被选中、当父级以下的所有子级被取消时实现父级也被取消、利用JS实现、是经过网上看到的代码进行部分修改而成、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";>
<html xmlns=";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框实验</title>
<style type="text/css">
ul { list-style:none; }
</style>
<script type="text/javascript">
window.onload = function()
{ var obj = document.getElementById('demo').getElementsByTagName('input');
for (var i = 0; i < obj.length; i ++)
{ obj[i].onclick = function() { //查找并选择/取消选择所有子项
var childrenObj = this.parentNode.getElementsByTagName(&#