订阅
上一篇
下一篇
带有复选框的属性菜单
作者:hesper 日期:2007-01-09
最近要用一个带复选框的属性菜单，发现这个代码不错，拿出来大家共享
<HTML>
<HEAD>
<TITLE>树菜单</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkSelect(){
var elm = event.srcElement;
// 增加的代码开始
try{
if (elm.parentElement.children[1].style.display=="none"){
elm.parentElement.children[1].style.display="";
}else{
elm.parentElement.children[1].style.display="none";
}
}catch (e){}
// 增加的代码结束
checkChildrenRecurve(elm);
checkRootRecurve(document.getElementById("root"));
}
function checkChildrenRecurve(elm){
var li = elm.parentNode;
var ul = li.lastChild;
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++){
lis[i].firstChild.checked=elm.checked;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkRootRecurve(ul){
if (ul.tagName != "UL") {
ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
return;
}
var lis = ul.children;
var allChecked = true;
var allUnChecked = true;
for (var i=0;i<lis.length;i++){
checkRootRecurve(lis[i].lastChild)
allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
}
ul.parentNode.firstChild.allChecked=allChecked;
ul.parentNode.firstChild.allUnChecked=allUnChecked;
if (allChecked || allUnChecked){
ul.parentNode.firstChild.checked=allChecked;
ul.parentNode.firstChild.indeterminate=false;
}else{
ul.parentNode.firstChild.indeterminate=true;
ul.parentNode.firstChild.checked=true;
}
}
http://www.pconcool.com
function init(){
var j=0;
var elms = document.getElementsByTagName("INPUT");
for (var i=0;i<elms.length;i++){
elms[i].onclick=checkSelect;
for (j=1;j<elms[i].parentElement.children.length;j++){
elms[i].parentElement.children[j].style.display="none";
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()">
<div>
<input type=checkbox>
<UL id=root>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
</UL>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>树菜单</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkSelect(){
var elm = event.srcElement;
// 增加的代码开始
try{
if (elm.parentElement.children[1].style.display=="none"){
elm.parentElement.children[1].style.display="";
}else{
elm.parentElement.children[1].style.display="none";
}
}catch (e){}
// 增加的代码结束
checkChildrenRecurve(elm);
checkRootRecurve(document.getElementById("root"));
}
function checkChildrenRecurve(elm){
var li = elm.parentNode;
var ul = li.lastChild;
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++){
lis[i].firstChild.checked=elm.checked;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkRootRecurve(ul){
if (ul.tagName != "UL") {
ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
return;
}
var lis = ul.children;
var allChecked = true;
var allUnChecked = true;
for (var i=0;i<lis.length;i++){
checkRootRecurve(lis[i].lastChild)
allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
}
ul.parentNode.firstChild.allChecked=allChecked;
ul.parentNode.firstChild.allUnChecked=allUnChecked;
if (allChecked || allUnChecked){
ul.parentNode.firstChild.checked=allChecked;
ul.parentNode.firstChild.indeterminate=false;
}else{
ul.parentNode.firstChild.indeterminate=true;
ul.parentNode.firstChild.checked=true;
}
}
http://www.pconcool.com
function init(){
var j=0;
var elms = document.getElementsByTagName("INPUT");
for (var i=0;i<elms.length;i++){
elms[i].onclick=checkSelect;
for (j=1;j<elms[i].parentElement.children.length;j++){
elms[i].parentElement.children[j].style.display="none";
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()">
<div>
<input type=checkbox>
<UL id=root>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
</UL>
</div>
</BODY>
</HTML>
[本日志由 hesper 于 2007-01-09 01:21 PM 编辑]
文章来自: 转贴
引用通告地址: http://www.wantfly.cn/trackback.asp?tbID=188
Tags:
文章来自: 转贴引用通告地址: http://www.wantfly.cn/trackback.asp?tbID=188Tags: 评论: 0 | 引用: 2 | 查看次数: 2709
发表评论
