みかづきブログ その3

3ヶ月つづけてみました。

すべてのチェックボックスにチェックを入れるボタンを実装する

  • 「すべてにチェック」を入れるにチェックを入れるとすべてのチェックボックスにチェックが入ります。
  • 「すべてにチェック」を入れるのチェックを外してもなにもおこりません。
  • 「すべてにチェックを入れる」以外のすべてのチャックボックスにチャックが入っていない時は「すべてにチェックを入れる」のチェックが外れます。

こんな感じでつくってみました。
日本語にするととてもわかりにくいのでデモをみていただいたほうがはやそうです。


DEMO


HTML

<form id="form">
    <label><input type="checkbox" id="all" />すべてにチェックを入れる</label>
    <label><input type="checkbox" />天丼</label>
    <label><input type="checkbox" />カツ丼</label>
    <label><input type="checkbox" />親子丼</label>
</form>

JavaScript

(function() {

    "use strict";
    
    $("#all").on("change", function() {
        if ($(this).prop("checked")) {
            $("[type='checkbox']").prop("checked", true);
        }
    });
    
    $("[type='checkbox']").on("change", function() {
        if (!$(this).prop("checked")) {
            $("#all").prop("checked", false);
        }
    });
    
})();

関連記事

kimizuka.hatenablog.com