チェックボックスを持つ ASP.NET ツリービュー コントロールがあります。
このjQueryを使用して、親がチェックされているときにすべての子チェックボックスをチェックします。このコードは正常に動作します。
<script type="text/javascript">
function CheckboxGroupSelection() {
$('.tree :checkbox').on('change', function () {
var checked = this.checked;
var $elem = $(this).closest('table');
var depth = $elem.find('div').length;
var $childs = $elem.nextAll('table');
$childs.each(function () {
var $child = $(this);
var d = $child.find('div').length;
if (d == depth) {
return false;
}
$child.find(':checkbox').prop('checked', checked);
});
});
}
</script>
問題はここにあります。親ノードが折りたたまれているときに、親ノードのチェックボックスをオンにすると、論理的にすべての子チェックボックスが選択されます。しかし、この jQuery は HTML マークアップを使用してチェックボックスを見つけてチェックするため、この jQuery を使用することはできません。また、親ノードが折りたたまれていると、子ノードのマークアップが表示されませんでした。
これを処理する方法は？または、コードビハインドを使用してこれを達成する方法はありますか c# または vb.net ?
折りたたまれたときの HTML マークアップ :
<div style="font-size: 11px; font-family: Tahoma; font-weight: bold; text-align: left;" class="tree" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Index">
<table cellspacing="0" cellpadding="0" style="border-width:0;">
<tbody><tr>
<td><a href="javascript:__doPostBack('ctl00$cphMain$ctlEsnSearchByServices$Treecontrol_Left_0$Tree_Index','t1730b784-94ca-42d3-80aa-1c9c064e271c')"><img style="border-width:0;" alt="Collapse Clinics" src="../Uploadedimages/System/Static_Images/TreeLineImages/dashminus.gif"></a></td><td style="width:295px;"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn0CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn0CheckBox"><span style="text-decoration:none;" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext0">Clinics</span></td>
</tr>
</tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
<tbody><tr>
<td><div style="width:20px;height:1px"></div></td><td><a href="javascript:__doPostBack('ctl00$cphMain$ctlEsnSearchByServices$Treecontrol_Left_0$Tree_Index','t1730b784-94ca-42d3-80aa-1c9c064e271c\\726a5894-6495-4bd2-90fa-1c0eb60f9406')"><img style="border-width:0;" alt="Expand GP Clinics" src="../Uploadedimages/System/Static_Images/TreeLineImages/tplus.gif"></a></td><td style="width:295px;"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn1CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn1CheckBox"><span style="text-decoration:none;" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext1">GP Clinics</span></td>
</tr>
</tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
<tbody><tr>
<td><div style="width:20px;height:1px"></div></td><td><img alt="" src="../Uploadedimages/System/Static_Images/TreeLineImages/t.gif"></td><td style="width:295px;"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn7CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn7CheckBox"><span style="text-decoration:none;" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext7">Other Clinics</span></td>
</tr>
</tbody></table><table cellspacing="0" cellpadding="0" style="border-width:0;">
<tbody><tr>
<td><div style="width:20px;height:1px"></div></td><td><img alt="" src="../Uploadedimages/System/Static_Images/TreeLineImages/l.gif"></td><td style="width:295px;"><input type="checkbox" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn8CheckBox" name="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indexn8CheckBox"><span style="text-decoration:none;" id="ctl00_cphMain_ctlEsnSearchByServices_Treecontrol_Left_0_Tree_Indext8">Polyclinics</span></td>
</tr>
</tbody></table>
</div>