带有复选框选项的Asp.Net TreeView仅适用于第一页Load。

时间:2015-09-22 14:02:06

标签: c# jquery asp.net treeview

我正在使用TreeView ShowCheckBoxes="All"。我想通过以下代码实现的目标是,当用户点击Parent node所有child nodes获取selected时。 :

enter image description here

此代码仅适用于首页加载。例如。我点击" Fruits"并且所有child nodes都被选中,当我再次点击时,所有child nodes都被取消选中。到现在为止还挺好。但是,当我点击" Fruits"再次child nodes没有被选中。我认为问题出现在我的jquery代码中。

ascx文件:

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All"></asp:TreeView>

代码背后:

 if (!IsPostBack)
            {
                TreeView1.Nodes.Add(new TreeNode("Fruits", "Fruits"));
                TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Mango", "Mango"));
                TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Apple", "Apple"));
                TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Pineapple", "Pineapple"));
                TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Orange", "Orange"));
                TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Grapes", "Grapes"));

                TreeView1.Nodes.Add(new TreeNode("Vegetables", "Vegetables"));
                TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Carrot", "Carrot"));
                TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Cauliflower", "Cauliflower"));
                TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Potato", "Potato"));
                TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Tomato", "Tomato"));
                TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Onion", "Onion"));

            }

ascx文件:

<script type="text/javascript">

        $(document).ready(function() {

            $("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
                var table = $(this).closest("table");
                if (table.next().length > 0 && table.next()[0].tagName == "DIV") {
                    //Is Parent CheckBox
                    var childDiv = table.next();
                    var isChecked = $(this).is(":checked");
                    $("input[type=checkbox]", childDiv).each(function () {
                        if (isChecked) {
                            $(this).attr("checked", "checked");
                        } else {
                            $(this).removeAttr("checked");
                        }
                    });
                } else {
                    //Is Child CheckBox
                    var parentDIV = $(this).closest("DIV");
                    if ($("input[type=checkbox]", parentDIV).length == $("input[type=checkbox]:checked", parentDIV).length) {
                        $("input[type=checkbox]", parentDIV.prev()).attr("checked", "checked");
                    } else {
                        $("input[type=checkbox]", parentDIV.prev()).removeAttr("checked");
                    }
                }
            });


        });

1 个答案:

答案 0 :(得分:1)

你可以使用.prop代替,attr有时会有奇怪的行为。

已检查

.prop('checked',true);

未检查

.prop('checked',false);