2013-01-22 7 views
1

하위 하위 카테고리가있는 상위 하위 카테고리 체크 박스가 있습니다. 하위 카테고리는 상위 카테고리를 클릭 할 때만 표시되어야하며 상위 카테고리가 선택 취소되면 모든 하위 카테고리가 숨겨져 야합니다.jQuery 체크 박스 체크 박스 체크 박스 체크하지 않음

모든 것이 잘 작동하지만, 하위 및 하위 파일이 선택되었다고 가정합니다. 이제는 상위 부모가 선택 취소 된 경우 확인란을 선택하지 않은 상태에서 하위 선택 유지 확인란을 숨 깁니다.

여기 내 코드입니다.

$(function() { 
$(':checkbox').change(function() { 
$("input[type='checkbox']:checked").each(function() { 
    var inner_id = $(this).attr('id'); 
    if (inner_id.search("parent") > -1) { 
    // $("input."+inner_id).attr('hidden','false') 
    $("."+inner_id).removeAttr("hidden"); 
    } 
}); 
}); 
}); 

$(function() { 
    $(':checkbox').click(function() { 
    var is_chk = $(this).attr('checked'); 
    var its_id = $(this).attr('id'); 
    if (is_chk != 'checked') { 
     $("."+its_id).attr('hidden', 'true'); 
    } 
}); 
}); 

이 html 코드는 다음과 같습니다.

<input type="checkbox" id="parent1" />parent<br/> 
&nbsp;&nbsp;<input type="checkbox" class="parent1" disabled="true" />child1<br/> 
&nbsp;&nbsp;<input type="checkbox" class="parent1" disabled="true"/>child2<br/> 
&nbsp;&nbsp;<input type="checkbox" class="parent1" disabled="true"/>child3<br/> 
<input type="checkbox" id="parent2" />parent<br/> 
&nbsp;&nbsp;<input type="checkbox" class="parent2" disabled="true"/>child1<br/> 
&nbsp;&nbsp;<input type="checkbox" class="parent2" 
id="parent3" disabled="true"/>child2-parent<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent3" disabled="true"/>child1<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent3" disabled="true"/>child2<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent3" disabled="true"/>child3<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent3" disabled="true"/>child4<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent3" id="parent4" disabled="true"/>child5-parent<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent4" disabled="true"/>child1<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 
class="parent4" disabled="true"/>child2<br/> 

또는 여기에서 시도해 볼 수 있습니다.

http://jsfiddle.net/DNDnT/4/

은 체크 박스를 모두 확인하고 내 문제를 이해 부모를 클릭합니다. 감사합니다. .

내 프로젝트에서 시도한 실제 코드는 다음과 같습니다.

$(function() { 
$(':checkbox').change(function() { 

$("input[type='checkbox']:checked").each(function() { 
    //var inner_id = $(this).attr('id'); 
    var inner_id = $(this).attr('value'); 
    var parId1="input."+inner_id; 
    var parId2="."+inner_id; 

$(parId1).removeAttr("disabled"); 
    $(parId2).removeAttr("hidden"); 

}); 
}); 
}); 

$(function() { 
$(':checkbox').click(function() { 
var is_chk = $(this).attr('checked'); 
    var its_id = $(this).attr('value'); 
    //var parId2="#"+its_id; 
    var parId1="input."+its_id; 
    var parId2="."+its_id; 


    if(is_chk!='checked') { 
     $(parId1).removeAttr("checked"); 
     $(parId1).attr('disabled','true'); 
     $(parId2).attr('hidden','true'); 

    } 
}); 
}); 
+0

당신의 바이올린으로 연주하는 시간이,하지만 어쩌면 이런 일을하려고하지 않는' .attr ('checked', false); ' –

답변

0

필자가 작성한 작품은 생각하지 않는다. 단지 바이올린을 보았다. 만약 당신이 원하는 경우에, 당신은 두 번째 기능이 줄을 추가 시도 할 수 있습니다 :

$("."+its_id).attr('checked', false); 

전에
$("."+its_id).attr('hidden', 'true'); 
+1

현재 클래스의 체크 된 값만 제거합니다. 실제로 문제가되는 아이의 자식은 어떨까요? –

+1

업데이트 된 코드를 살펴볼 수 있습니까? ! –