Флажок неопределенной логики состояния

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. Когда я нажимаю на элемент заголовка, он будет автоматически выбрать или отменить выбор всех список деталей li в это ul список сразу после него.
2. Когда я нажимаю элемент списка li внутри вложенного ul Я хочу проверить, проверяются ли все остальные элементы (в этом случае установите галочку в элементе списка заголовков) или сняты флажки (в этом случае, удалите галочку в элементе списка заголовков), если это сочетание отмеченных и непроверенных, затем установите элемент списка заголовков в состояние неопределенного.
3. Когда я проверяю элемент списка, например, элемент списка 1, который отображается в списке заголовка 1 и списке заголовка 2, я хочу, чтобы он снял оба элемента или установил оба элемента в обоих списках и вызвал требование проверки два для проведения списков.

У меня очень тяжелое время для этого, потому что я не очень хорошо разбираюсь в JavaScript, и весь код, который я читал до сих пор, действительно не близок к тому, что мне нужно.

Любая помощь будет оценена по достоинству. Я использую jQuery 1.9.1, но если вы хотите сделать это на кошках со старыми костями, это тоже хорошо со мной (так как это проще, когда вы устанавливаете тормозную точку в Google Dev Tools, чтобы увидеть, что происходит).

Answer 1

Я добавил топлист класса к наружному UL и заголовка класса для элементов заголовка 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); 
});