我正在使用TreeView
ShowCheckBoxes="All"
。我想通过以下代码实现的目标是,当用户点击Parent node
所有child nodes
获取selected
时。 :
此代码仅适用于首页加载。例如。我点击" 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");
}
}
});
});
答案 0 :(得分:1)
你可以使用.prop代替,attr有时会有奇怪的行为。
已检查
.prop('checked',true);
未检查
.prop('checked',false);