[英]on checking the child checkbox parent does not checked vise versa Works perfectly
嗨,當我單擊父復選框時,我在asp.net repeater
這些復選框,如您在這張圖片中看到的,所有子復選框都被選中,另一方面,當我選中子復選框時,父復選框未被選中。 我正在使用Jquery
實現此目的。我當前的ASP.NET
代碼如下所示
<ul id='<%# "p_"+Eval("ApplicationId") %>' class="child-ul-hide child-ul">
<asp:Repeater ID="rptrPages" runat="server" OnItemDataBound="rptrPages_ItemDataBound">
<ItemTemplate>
<li>
<%-- <span id='<%# "sp_"+Eval("PageId") %>' class="parent arrow-right" state="hide"></span>--%>
<asp:Label ID="lblSpaces" runat="server" Text='<%# Eval("Spaces") %>'></asp:Label>
<asp:Literal ID="ltrArrowSpan" runat="server"></asp:Literal>
<label>
<asp:CheckBox ID="chkPage" runat="server" Text='<%# Eval("PageTitle") %>'
CssClass='<%# "page Pid_"+ Eval("ParentId")%>' PageId='<%# Eval("PageId") %>' ParentId='<%# Eval("ParentId") %>'
Checked='<%# Eval("IsEnable")== null ? false: Convert.ToBoolean(Eval("IsEnable").ToString()) %>' />
</label>
<asp:HiddenField ID="hdPageId" runat="server" Value='<%# Eval("PageId") %>' />
我的JavaScript
代碼如下所示,您可以看到我嘗試了其他一些東西,也使用了中間代碼段,但是當它們被邀請使用ASP.NET
一切都沒有按計划進行。 你們中許多人可能建議使用<input type='checkbox'/>
抱歉,我不能這樣做
$(document).ready(function () {
/* Hide Show Tree lis
*******************************************/
$(".parent").click(function () {
var ID = $(this).attr("id");
var state = $("#" + ID).attr("state");
if (state == "hide") {
$("#" + ID).attr('state', 'show');
$("#" + ID).addClass("arrow-down").removeClass("arrow-right");
ID = ID.replace("s", "");
$("#" + ID).addClass("child-ul-show").removeClass("child-ul-hide");
}
else {
$("#" + ID).attr('state', 'hide');
$("#" + ID).addClass("arrow-right").removeClass("arrow-down");
ID = ID.replace("s", "");
$("#" + ID).addClass("child-ul-hide").removeClass("child-ul-show");
}
});
// /* START Parent Enable CheckBox Click Event
// *********************************************/
$(".page input[type='checkbox']").click(function() {
var PageId = $(this).parent('.page').attr("PageId");
var parentId = $(this).parent('.page').attr("ParentId");
var EnableStatus = $(this).prop("checked");
// Check/ Uncheck Controls Checkboxes
$("." + PageId + " input[type='checkbox']").prop('checked', EnableStatus);
//Check unCheck Childs Checkboxes
$(".Pid_" + PageId + " input[type='checkbox']").prop('checked', EnableStatus);
$(".Pid_" + PageId + " input[type='checkbox']").each(function() {
PageId = $(this).parent('.page').attr("PageId");
EnableStatus = $(this).prop("checked");
$(".Pid_" + PageId + " input[type='checkbox']").prop('checked', EnableStatus);
});
//$(".page input[type='checkbox']").prop('checked', false);
//$(".Pid_" + ParentId + " input[type='checkbox']").each(function() {
// debugger;
// EnableStatus = $(this).prop("checked");
// if (EnableStatus) {
// $(".page input[type='checkbox']").prop('checked', EnableStatus);
// return false;
// }
//});
debugger;
parentId = parseInt(parentId);
if (parentId>0) {
$("input[type='checkbox'][ParentId^='" + parentId + "']").prop('checked', true);
}
/*/ */
//$('input[name=' + parentId + '][value=Done][type=checkbox]:not(:checked)').attr({
// checked: 'checked',
// disabled: 'disabled'
//});
});
我看到的是,您有一個復選框同時充當父母和孩子,我不知道是什么使您這么做。 讓我們得到答案。
將屬性添加到類中,因為ParentId='<%# Eval("ParentId")
獲取該屬性
var ParentId = $(this).parent('.page').attr("ParentId");
使用JavaScript parseInt
將您的ID解析為整數,而不是此ID
ParentId= parseInt(ParentId);
if (ParentId > 0) {
$(".p_" + ParentId + " input[type='checkbox']").prop('checked', false);
$(".Pid_" + ParentId + " input[type='checkbox']").each(function () {
EnableStatus = $(this).prop("checked");
if (EnableStatus)
{
$(".p_" + ParentId + " input[type='checkbox']").prop('checked', EnableStatus);
}
});
}
希望這個能對您有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.