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

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

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

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