中途半端なcheckboxを作る

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

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

サンプル

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

ソースコード

htmlとjavascriptのコードはこちら

<ul>
    <li><label><input type="checkbox" id="checkAll"> すべてにチェックをする</label></li>
    <li><ul id="checkboxArea">
        <li><label><input type="checkbox"> アイテム1</label></li>
        <li><label><input type="checkbox" checked> アイテム2</label></li>
        <li><label><input type="checkbox"> アイテム3</label></li>
    </ul></li>
</ul>
<script>
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);
        });
    });
});
</script>

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

コメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。