저는 JQuery로 조작하고있는 계층 적 데이터가 있습니다. 트리의 어떤 요소가 선택되었는지 시각적으로 표시하려고합니다.JQuery : has(), children 만 선택해야합니다.
이<li>
<input class="selectedcheck" checked disabled type="checkbox" name="ign-130">
<input class="millermultiselect" type="checkbox" name="chk-130">
<a href="#" data-parent="6" data-nodename="Egypt" data-self="130">Egypt</a>
<ul>
<li>
<input class="selectedcheck" checked disabled type="checkbox" name="ign-131">
<input class="millermultiselect" type="checkbox" name="chk-131">
<a href="#" data-parent="130" data-nodename="Cairo" data-self="131">Cairo</a>
</li>
</ul>
</li>
이 모든 사업부 번호 밀러 내에 존재 : 여기에 (우리가 조작하는) 내가 생성하고있는 HTML의 샘플입니다. 첫 번째 확인란 (.selectedcheck)은 영역이 선택되었음을 표시하는 데에만 사용됩니다 (숨김 상태로 시작하고 부모 영역이 선택되면 표시되므로 이집트에서 .millermultiselect를 클릭하면 카이로의 .selectedcheck Cairo의 .millmulticlectlect를 대신하여 눈에 띄게 될 것입니다.) 내가 뭘하고 싶은 것은 또한 체크 박스를 직접 자식으로 포함하고있는 모든 li에 클래스를 추가하는 것이다. 나는 다음과 같은 jQuery 코드로이를 시도하고있다 :
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
오전 데 문제는 모든 지역이 어느 지역에있는 체크 상자를 선택, 중첩 된 상향 링크의로 구성되어 있기 때문에도에 .chosen 추가하는 것입니다 나무의 더 높은 어떤 li .... 그래서 카이로의 체크 박스를 클릭하는 것은 이집트와 아프리카에 .chosen 학급을 더한다.
누구나 눈에 보이는 체크 박스가있는 아이를 캡처하는 방법에 대해 어떻게 생각합니까?
$(document).ready(function() {
$(".selectedcheck").hide();
showSelected = function(){
$("#miller li").removeClass("chosen");
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
};
$("#miller a").click(function(event) {
event.preventDefault();
$("#miller li").removeClass("selected");
$(this).parent().addClass("selected");
data = $(this).data();
$("#addChild").attr("href", "addChild.php?parentid=" + data.self).html("Add item under " + data.nodename);
$("#addSibling").attr("href", "addChild.php?parentid=" + data.parent).html("Add item next to " + data.nodename);
$("#editRegion").attr("href", "editRegion.php?id=" + data.self).html("Edit " + data.nodename);
$("#deleteRegion").attr("href", "deleteRegion.php?id=" + data.self).html("Delete " + data.nodename);
$("#addResort").attr("href", "addResort.php?regionid=" + data.self).html("Add resort to " + data.nodename);
$("#miller ul ul").hide();
$(this).parents("#miller ul").show();
$(this).siblings("#miller ul").show();
showSelected();
});
$("#miller .millermultiselect").click(function(event) {
$("#miller li").removeClass("selected");
$(this).parent().addClass("selected");
$("#miller ul ul").hide();
$(this).parents("#miller ul").show();
if($(this).is(':checked')) {
$(this).parent().find(".millermultiselect").not(this).hide();
$(this).parent().find(".millermultiselect").not(this).removeAttr("checked");
$(this).parent().find(".selectedcheck").show();
} else {
$(this).parent().find(".millermultiselect").not(this).show();
$(this).parent().find(".selectedcheck").hide();
}
$(this).siblings(".selectedcheck").hide();
$(this).siblings("#miller ul").show();
showSelected();
});
});
정확히 내가 찾고 있었던 것이 었습니다. 나는 내 두뇌가 오늘 제대로 작동하지 않는다고 확신한다. –