Razor構文でcheckboxの全選択ボタンを実装したい

Question

前提・実現したいこと

複数のチェックボックスがある状態で、「全選択」ボタンを押すと、チェックボックス全てが選択された状態になるようにしたいです。

※（追記）jQueryの読み込み位置について
ASP.NET MVCの共通レイアウトを使用しておりまして、以下のソースコードは、共通レイアウト内の
「@RenderBody()」の中身となるコードになります。
jQueryは「@RenderBody()」より後に記述しておりますので、以下のソースコードより後に読み込んでいる状態となります。

該当のソースコード

<button onclick="checkAll()" class="btn btn-default">全選択</button>

<div class="flex-row">
    <div><label>@Html.CheckBox("CheckBoxID_A", False, New With {.class = "check_all"}) A</label></div>
    <div><label>@Html.CheckBox("CheckBoxID_B", False, New With {.class = "check_all"}) B</label></div>
    <div><label>@Html.CheckBox("CheckBoxID_C", False, New With {.class = "check_all"}) C</label></div>
    <div><label>@Html.CheckBox("CheckBoxID_D", False, New With {.class = "check_all"}) D</label></div>
    <div><label>@Html.CheckBox("CheckBoxID_E", False, New With {.class = "check_all"}) E</label></div>
</div>

<script>
function checkAll() {
    $('.check_all').prop("checked", $(this).prop("checked"));
};
</script>

試したこと

javascriptのcheckAll() 関数の中で、「concole.log("test");」と記述して、実行してみた際、
コンソールに「test」と表示されたので、checkAll()は効いているようでした。

ただ、要素の検証をした際、上記で書いたRazor構文の記述が<input>タグに変換されていたのですが、
checked属性が見当たらず、
New With {.class = "check_all"}の箇所に
New With {.class = "check_all", .checked = "checked"}無理矢理記述してみても
要素の検証では（checked属性が）表示されておりませんでした。

補足情報（FW/ツールのバージョンなど）

統合開発環境
Visual Studio2019
（言語：VB.NET、プロジェクトテンプレート：ASP.NET Webアプリケーション MVC）

使用PC
Windows10

※平日は仕事のため、返信が19:30-22:00になる可能性が高いです。
※休日の返信は不定期です。
申し訳ございませんが、どうぞよろしくお願いします。

Comments

[退会済みユーザー]

jquery.js はどこで読み込まれるのですか？ 質問書いてあったスクリプトの後と言うことはないですか？

[退会済みユーザー]

ASP.NET がレンダリングした html コードを書いて、それに対する jQuery 書き方の質問にすることをお勧めします。そうすれば、ASP.NET は知らないけど jQuery ならわかるという人は多いので、たぶん回答は即返ってくると思います。

[Eltk]

>SurferOnWww様

ご指摘ありがとうございます！
jQueryの読み込みについての補足説明を追記いたしました。

Answer 1

jquery.js が読み込まれているか、読み込まれているとしてそのタイミングがどうなっているか不明ですが、それに問題なければ、

$('.check_all').prop("checked", $(this).prop("checked"));

を

$('.check_all').prop("checked", true);

にすれば、チェックが入るはずです。

Comments

[Eltk]

>SurferOnWww様

jQueryの読み込みは、「該当のソースコードより後」に記述しておりました。失礼いたしました。
ご教授いただいたソースコードに書き換え、無事、想定していた動作になりました。
いつもありがとうございます！