체크 상자 불확정 상태 논리

Question

목록 항목이 이와 비슷한 모양으로 중첩되지 않은 목록이 중첩되어 있습니다.

<ul> 
    <li><input type="checkbox" /> Header 1</li> 
    <ul> 
     <li><input type="checkbox" value="1" />Item 1</li> 
    </ul> 
    <li><input type="checkbox" /> Header 2</li> 
    <ul> 
     <li><input type="checkbox" value="1" />Item 1</li> 
     <li><input type="checkbox" value="2" />Item 2</li> 
     <li><input type="checkbox" value="3" />Item 3</li> 
     <li><input type="checkbox" value="4" />Item 4</li> 
    </ul> 
    <li><input type="checkbox" /> Header 3</li> 
    <ul> 
     <li><input type="checkbox" value="5" />Item 5</li> 
     <li><input type="checkbox" value="6" />Item 6</li> 
     <li><input type="checkbox" value="7" />Item 7</li> 
     <li><input type="checkbox" value="8" />Item 8</li> 
     <li><input type="checkbox" value="9" />Item 9</li> 
     <li><input type="checkbox" value="10" />Item 10</li> 
     <li><input type="checkbox" value="11" />Item 11</li> 
     <li><input type="checkbox" value="12" />Item 12</li> 
     <li><input type="checkbox" value="13" />Item 13</li> 
     <li><input type="checkbox" value="14" />Item 14</li> 
     <li><input type="checkbox" value="15" />Item 15</li> 
     <li><input type="checkbox" value="16" />Item 16</li> 
    </ul> 
</ul> 

항목 1은 헤더 1의 목록과 헤더 2의 목록에 있습니다.

달성하고자하는 몇 가지 사항이 있습니다.

1. 내가 헤더 항목을 클릭하면 자동으로 선택합니다 또는 그것을 바로 다음 ul 목록입니다 내의 모든 목록 항목을 li 선택을 취소합니다.
2. li 내포 된 ul 내에있는 항목을 클릭하면 다른 항목이 모두 선택되었는지 (이 경우 헤더 목록 항목에 체크 표시를하십시오) 또는 선택하지 않았는지 확인하고 싶습니다 (이 경우, Header List Item의 체크 표시를 제거하십시오.) 체크 표시와 체크 표시가 혼합 된 경우 헤더 목록 항목을 불확정 상태로 설정하십시오.
3. 머리글 1의 목록과 머리글 2의 목록에 나타나는 목록 항목 1과 같은 목록 항목을 검사 할 때 두 항목을 모두 선택 취소하거나 두 목록에서 두 항목을 모두 확인하여 두 번째 영향을받은 목록에서 일어난다.

저는 JavaScript를 잘 사용하지 못했고 지금까지 읽은 코드가 모두 내가 필요로하는 것과 거의 다르기 때문에이 작업을 수행하는 데 어려움을 겪고 있습니다.

도움을 주시면 감사하겠습니다. jQuery 1.9.1을 사용하고 있지만, 자바 스크립트를 사용하여 자바 스크립트를 사용하고 싶다면 (나와 Google Dev Tools에서 브레이크 포인트를 설정하면 쉽게 이해할 수있다.)

Answer 1

나는 당신이 조정할 할 수 있도록 선택기를 단순화하기 위해 외부 UL에 topList 클래스와 LI 헤더 요소에 헤더 클래스를 추가했습니다,하지만 난이 당신이 원하는 일을한다고 생각합니다. jsfiddle

//selects all items under a header. This might also select checkboxes from other headers if they share a value. Assumes, "this" points to the header LI 
function selectAll() { 
    var $this = $(this); 
    var isChecked = $this.find(":checkbox").prop("checked"); 
    $this.find("+ul :checkbox").each(function() { 
     selectCheckbox($(this), isChecked); 
    }); 
    $(".header + ul").each(updateHeaderState); 
} 

//selects or deselects a checkbox. Also, selects other checkboxes if they share a value 
function selectCheckbox($checkbox, isChecked) { 
    var value = $checkbox.val(); 
    $checkbox.prop("checked", isChecked); 
    $(".topList :checkbox[value="+value+"]").prop("checked", isChecked); 
} 

//updates the state of the header checkbox. Assumes "this" points to the UL element following a header 
function updateHeaderState() { 
    var $this = $(this); 
    var someChecked = $this.find(":checkbox:checked").length > 0; 
    var someUnchecked = $this.find(":checkbox:not(:checked)").length > 0; 

    var $header = $this.prev().find(":checkbox"); 
    $header.prop("indeterminate", someChecked && someUnchecked); 
    $header.prop("checked", someChecked || !someUnchecked); 
} 

$(".header").click(selectAll); 
$(".header + ul li").click(function() { 
    var $this = $(this); 
    var isChecked = $this.find(":checkbox").prop("checked"); 
    selectCheckbox($this.find(":checkbox"), isChecked);  
    $(".header + ul").each(updateHeaderState); 
});