关于复选框的实用效果
来源:互联网 发布:centos 6.5静态ip 编辑:程序博客网 时间:2024/04/29 04:50
再很多网站里这都是一个很常见的效果,就是点击总分类的复选框,自动选择所有子分类的复选框,或者如果子分类的所有复选框全部被选中则总分类复选框也自动被选中。
这次偶时再msn的网站上偶然看到的,于是自己也试着写了下,代码如下:
这次偶时再msn的网站上偶然看到的,于是自己也试着写了下,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkAll(str){
var a=document.getElementById("t"+str).getElementsByTagName("input");
var b=document.getElementById("d"+str);
for(var i=0;i<a.length;i++){
a[i].checked=b.checked;
}
}
function fixChk(str){
var a=document.getElementById("t1").getElementsByTagName("input");
var b=document.getElementById("d1");
for(var i=0;i<a.length;i++){
if(a[i].checked==false){
b.checked=false;
return ;
}
}
b.checked=true;
}
</script>
</head>
<body>
<center>
<div style="width:90%;text-align:left;border:1px solid #ccc;height:25px;line-height:25px"><input type="checkbox" id="d1" onclick="checkAll('1')"/>休闲娱乐</div>
<div style="width:90%;text-align:left;border:1px solid #ccc;" id="t1">
<input type="checkbox" onclick="fixChk('1')" />书籍及杂志
<input type="checkbox" onclick="fixChk('1')" />音乐及影碟
<br /> <input type="checkbox" onclick="fixChk('1')" />旅游
</div>
</center>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkAll(str){
var a=document.getElementById("t"+str).getElementsByTagName("input");
var b=document.getElementById("d"+str);
for(var i=0;i<a.length;i++){
a[i].checked=b.checked;
}
}
function fixChk(str){
var a=document.getElementById("t1").getElementsByTagName("input");
var b=document.getElementById("d1");
for(var i=0;i<a.length;i++){
if(a[i].checked==false){
b.checked=false;
return ;
}
}
b.checked=true;
}
</script>
</head>
<body>
<center>
<div style="width:90%;text-align:left;border:1px solid #ccc;height:25px;line-height:25px"><input type="checkbox" id="d1" onclick="checkAll('1')"/>休闲娱乐</div>
<div style="width:90%;text-align:left;border:1px solid #ccc;" id="t1">
<input type="checkbox" onclick="fixChk('1')" />书籍及杂志
<input type="checkbox" onclick="fixChk('1')" />音乐及影碟
<br /> <input type="checkbox" onclick="fixChk('1')" />旅游
</div>
</center>
</body>
</html>
- 关于复选框的实用效果
- 关于复选框的传递
- checkbox设置复选框的只读效果
- 两个复选框的联动效果
- 复选框全选效果
- 关于Axuer7.0高级交互设计学习笔记——如何制作复选框的全部选中效果
- 关于下拉框,复选框的问题
- 关于杂乱的复选框处理.
- 关于杂乱的复选框处理.
- jquery关于复选框的全选
- Jquery 和关于 复选框 的问题
- 关于struts2复选框的问题
- js实现复选框全选效果,已经用后台获取选中的复选框的值
- 【JS】复选框实现效果
- 复选框全选、全不选和反选的效果实现
- 复选框全选、全不选和反选的效果实现
- 复选框全选、全不选和反选的效果实现
- 复选框的全选和取消全选效果
- vs2005常用快捷键
- struct和class区别的背后
- Microsoft .NET Pet Shop 4 架构与技术分析
- 使Div内内容可编辑
- 初学CodeSmith分享单页DB文档模板
- 关于复选框的实用效果
- ASP.NET.2.0.in.C.Sharp.2005.From.Novice.to.Professional的读书笔记[9]
- javascript事件查询综合
- Chandler摆脱了XML的困扰
- 《解剖PetShop》系列之一,二
- Active Directory 结构
- 郁闷了
- 配置WAP网站的服务器(接自http://blog.chinaitlab.com/user1/263305/archives/2005/28039.html)
- CSDN BLOG"技术专家群工作平台"发布公告