1

順序付けされていないリストをネストしました。見出しは次のようになります。

<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のリストとヘッダー2のリストに表示されるリストアイテム1などのリストアイテムをチェックするときに、両方のアイテムのチェックを外すか、両方のリストの両方のアイテムをチェックして、チェックイン要件2を実行させます。影響を受けるリスト。

私はJavaScriptがあまり得意ではなく、これまでに読んだすべてのコードが実際に必要なものに近づいていないため、これを行うのに非常に苦労しています。

どんな助けでもいただければ幸いです。私はjQuery1.9.1を使用していますが、必要に応じてJavaScriptでそれを実行することもできます（Google Dev Toolsでブレーキポイントを設定すると、何が起こっているかを確認するのが簡単になります）。

4

1 に答える 1

2

セレクターを単純化するために、外側の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);
});
于 2013-03-05T14:33:42.360 に答える