中途半端なcheckboxを作る

なんて言ったらいいかわかりませんが、複数のチェックボックスのうち、1つ以上チェックが入っていて、全部にはチェックが入っていないような中途半端な状態を表すチェックボックスを作る方法です。
画像もcssもいりません。Javascriptで実装できます。

# 正確にはindeterminate（不確定）な状態だそうです。

サンプル
ソースコード

サンプル

下手な説明よりは実際に動くサンプルをご覧ください。
サンプルは以下。

See the Pen Untitled by hukinotou (@webspace) on CodePen.

ソースコード

htmlとjavascriptのコードはこちら

HTML

<ul>
    <li><label><input type="checkbox" id="checkAll"> すべてにチェックをする</label></li>
    <li><ul id="checkboxArea">
        <li><label><input type="checkbox"> アイテム１</label></li>
        <li><label><input type="checkbox" checked> アイテム２</label></li>
        <li><label><input type="checkbox"> アイテム３</label></li>
    </ul></li>
</ul>

Javascript

jQuery(document).ready(function(){
    jQuery("#checkboxArea").click(function () {
        var checkboxCount = jQuery("#checkboxArea input[type=checkbox]").length;
        var selectedCount = jQuery("#checkboxArea input[type=checkbox]:checked").length;
        if (checkboxCount === selectedCount) {
            jQuery("#checkAll").prop("indeterminate", false).prop("checked", true );
        } else if (0 === selectedCount) {
            jQuery("#checkAll").prop("indeterminate", false).prop("checked", false);
        } else {
            jQuery("#checkAll").prop("indeterminate", true ).prop("checked", false);
        }
    }).click();
    jQuery("#checkAll").click(function () {
        var checked = jQuery("#checkAll").prop("checked");
        jQuery("#checkboxArea input[type=checkbox]").each(function(){
            jQuery(this).prop("checked", checked);
        });
    });
});

jQuery("#checkAll").prop("indeterminate", true);これで中途半端な状態になるようです。
これはhtmlの属性に書いてもダメで、javascriptで指定しないといけないようです。
POSTされるかどうかはcheckedによって決まるようです。

[AD]