树形菜单(checkbox列表)-- 设置checkbox的选中状态

最新推荐文章于 2021-09-08 15:37:01 发布

转载最新推荐文章于 2021-09-08 15:37:01 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joe-yang/archive/2009/03/14/1411650.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过JavaScript实现的Checkbox选中状态设置方法。该方法允许父级Checkbox控制其子项的状态，并确保子项的状态变化能反馈到父级。通过对DOM的操作，实现了父子Checkbox之间的联动效果。

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

设置checkbox的选中状态

一个父节点可以包含0至多个一级子节点

Code

/**//*

* coding at 2009-03-14 by joe.yang

function checkBoxChanged(e)

{

var el = e.target || event.srcElement;

var arrCheckBox = new Array();

var index = 0;

if (el.tagName == "INPUT" && el.type == "checkbox")

{

var divNode = el.parentNode.parentNode; // div

var isParent = false;

if (el.parentNode.getAttribute("flag") == "parent")

{

isParent = true;

arrCheckBox[index++] = el;

arrCheckBox = getCheckBoxGroup(arrCheckBox, divNode, index);

}

else

{

isParent = false;

index++;

arrCheckBox[index++] = el;

while (divNode.previousSibling != null)

{

var preNode = divNode.previousSibling;

//处理空文本节点

while (preNode.nodeType == 3 || (preNode.nodeType == 1 && preNode.tagName != "DIV"))

{

preNode = preNode.previousSibling;

}

var slibNode = preNode.getElementsByTagName("input");

if (slibNode.length == 0 ||

slibNode[0].type != "checkbox")

{

break;

}

if (slibNode[0].parentNode.getAttribute("flag") == "parent")

{

arrCheckBox[0] = slibNode[0];

break;

}

else

{

arrCheckBox[index++] = slibNode[0];

}

divNode = slibNode[0].parentNode.parentNode;

}

divNode = el.parentNode.parentNode; // div

arrCheckBox = getCheckBoxGroup(arrCheckBox, divNode, index);

}

setCheckBox(arrCheckBox, isParent)

}

function getCheckBoxGroup(arrCheckBox, divNode, index)

{

while (divNode.nextSibling != null)

{

var nexNode = divNode.nextSibling;

//处理空文本节点(就算没文字内容，如果有换行，则该文本节点就是回车符)

while (nexNode.nodeType == 3 || (nexNode.nodeType == 1 && nexNode.tagName != "DIV"))

{

nexNode = nexNode.nextSibling;

}

var slibNode = nexNode.getElementsByTagName("input");

if (slibNode.length == 0 || slibNode[0].parentNode.getAttribute("flag") == "parent" ||

slibNode[0].type != "checkbox")

{

break;

}

arrCheckBox[index++] = slibNode[0];

divNode = slibNode[0].parentNode.parentNode;

}

return arrCheckBox;

}

function setCheckBox(arrays, isParent)

{

var count = 0;

for (var i = 1; i < arrays.length; i++)

{

if (isParent)

{

arrays[i].checked = arrays[0].checked;

}

else

{

if (arrays[i].checked)

{

count++;

}

if (!isParent)

{

if (arrays.length == count + 1)

{

arrays[0].checked = true;

}

else

{

arrays[0].checked = false;

}

</script>

---------

父节点标记flag="parent"

子节点标记flag="child"

Code
<form id="form1" runat="server">
    <div>
        <div>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox1" flag="parent" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox2" runat="server" flag="child" Text="CheckBox2" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox3" runat="server" flag="child" Text="CheckBox3" /></div>
        <div>
            <asp:CheckBox ID="CheckBox4" runat="server" Text="CheckBox4" flag="parent" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox5" runat="server" Text="CheckBox5" flag="child" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox6" runat="server" Text="CheckBox6" flag="child" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox7" runat="server" Text="CheckBox7" flag="child" /></div>
        <div>
            <asp:CheckBox ID="CheckBox8" runat="server" Text="CheckBox1" flag="parent" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox9" runat="server" flag="child" Text="CheckBox2" /></div>
        <div>
                      
            <asp:CheckBox ID="CheckBox10" runat="server" flag="child" Text="CheckBox3" /></div>
              <div>
            <asp:CheckBox ID="CheckBox11" runat="server" Text="CheckBox1" flag="parent" /></div>
              <div>
            <asp:CheckBox ID="CheckBox12" runat="server" Text="CheckBox1" flag="parent" /></div>
              <div>
            <asp:CheckBox ID="CheckBox13" runat="server" Text="CheckBox1" flag="parent" /></div>

    </div>

    </form>

Code
CheckBox1.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox2.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox3.Attributes.Add("onclick", "checkBoxChanged(event)");

                CheckBox4.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox5.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox6.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox7.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox8.Attributes.Add("onclick", "checkBoxChanged(event)");

                CheckBox9.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox10.Attributes.Add("onclick", "checkBoxChanged(event)");

                CheckBox11.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox12.Attributes.Add("onclick", "checkBoxChanged(event)");
                CheckBox13.Attributes.Add("onclick", "checkBoxChanged(event)");

转载于:https://www.cnblogs.com/joe-yang/archive/2009/03/14/1411650.html