最简洁的HTML JS树形带复选框

最新推荐文章于 2021-07-02 06:59:41 发布

cncco

最新推荐文章于 2021-07-02 06:59:41 发布

阅读量1w

点赞数 1

分类专栏： HTML JS 文章标签： HTML JavaScript 树 CheckBox

本文链接：https://blog.csdn.net/cncco/article/details/8894211

版权

JS 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

最简洁的HTML JS树形带复选框,点大类自动选中子类.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--

function menus(str){
var obj, pic;
// 返回 str 对象和 picId 对象是否存在
if (document.getElementByIdx(str)){
obj=document.getElementByIdx(str); //obj 为 DIV 对象
//pic 为图片对象

if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""; //就将 display 的样式清空
//pic.src = "0001.gif"; //更改图片对象的路径
}else{
obj.style.display = "none";
//pic.src = "0000.gif";
}
}
}
function   change(obj)
{
var   objs=document.getElementsByName(obj.name);

   //如果取消选中某个子,则其父也取消选中
   for(var   i=0;   i<objs.length;   i++)
{
if(!obj.checked&&obj.id.substr(0,objs[i].id.length)==objs[i].id)
    objs[i].checked=false;
}
//如果选中子,刚其父也被选中
// for(var   i=0;   i<objs.length;   i++)
// {
// if(obj.checked&&obj.id.substr(0,objs[i].id.length)==objs[i].id)
//   objs[i].checked=true;
// }
//如果选中父,则所有子都被选中
for(var   i=0;   i<objs.length;   i++)
{
if(objs[i].id.substr(0,obj.id.length)==obj.id)
    objs[i].checked=obj.checked;
}
return   true;
}
//-->
</script>
<style type="text/css">

</style>
</head>

<body>

<form name="form" method="post" action="show.jsp">

<div class="div1">
<input   type="checkbox"   name="t"     id="102"   value="河北"   οnclick="return   change(this);"/><span onClick="menus('menu2')">河北</span></div>
<div id="menu2" style="display:" class="div2"> 
<input   type="checkbox"   name="t"     id="10201"   value="石家庄"   οnclick="return   change(this);"/>石家庄<br/> 
<input   type="checkbox"   name="t"     id="10202"   value="保定"   οnclick="return   change(this);"/>保定<br/>
</div>

<div class="div1">
<input   type="checkbox"   name="t"     id="103"   value="江苏"   οnclick="return   change(this);"/><span onClick="menus('menu3')">江苏</span></div>
<div id="menu3" style="display:" class="div2"> 
<input   type="checkbox"   name="t"     id="10301"   value="南京"   οnclick="return   change(this);"/>南京<br/> 
<input   type="checkbox"   name="t"     id="10302"   value="徐州"   οnclick="return   change(this);"/>徐州<br/>  
<input   type="checkbox"   name="t"     id="10303"   value="苏州"   οnclick="return   change(this);"/>苏州<br/>
</div>
<input   name="submit"   type="submit"   value="提交" />
</form>
</body>
</html>

cncco

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
最简洁的HTML JS树形带复选框

最简洁的HTML JS树形带复选框,点大类自动选中子类.http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档function menus(str){var obj, pic;// 返回 str 对象和 picId 对象是否存在if (document.getElementByIdx(
复制链接

扫一扫