jqueryを使用してチェックボックスを一括で選択するスクリプトをメモします。phpなどと併用して、リストの削除やダウンロード等に便利な機能です。

jqueryライブラリを設定する

jqueryを記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

スクリプトを記述する

次にスクリプトを記述します。

<script>
$(function() {
// 1. 「全選択」する
$('#allcheck').on('click', function() {
$("input[name='pdf[]']").prop('checked', this.checked);
});
// 2. 「全選択」以外のチェックボックスがクリックされたら、
$("input[name='pdf[]']").on('click', function() {
if ($('#box :checked').length == $('#formfiled :input').length) {
// 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
$('#allcheck').prop('checked', true);
} else {
// 1つでもチェックが入っていたら、「全選択」 = checked
$('#allcheck').prop('checked', false);
}
});
});
</script>

HTMLを記述する

HTMLを以下のように記述します。

<form method="post" name="sample" action="">

<table id="formfiled">
<tr>
<th>登録年月日</th>
<th>会員氏名</th>
<th>メールアドレス</th>
<th>都道府県</th>
<th>ファイル</th>
<th><label for="all"><input type="checkbox" name="allChecked" id="allcheck">全選択</label></th>
</tr>
<tr>
<td>20211001</td>
<td>山田太郎</td>
<td>taro@sample.com</td>
<td>東京都</td>
<td><a href="sample.pdf" download>ファイルをダウンロード</a></td>
<td><label><input type="checkbox" name="pdf[]" value="sample.pdf"/></label></td>
</tr>
<tr>
<td>20211010</td>
<td>山田花子</td>
<td>hanako@sample.com</td>
<td>東京都</td>
<td><a href="sample.pdf" download>ファイルをダウンロード</a></td>
<td><label><input type="checkbox" name="pdf[]" value="sample.pdf"/></label></td>
</tr>
<tr>
<td>20211020</td>
<td>日本太郎</td>
<td>n.taro@sample.com</td>
<td>神奈川県</td>
<td><a href="sample.pdf" download>ファイルをダウンロード</a></td>
<td><label><input type="checkbox" name="pdf[]" value="sample.pdf"/></label></td>
</tr>
<tr>
<td>20211101</td>
<td>日本花子</td>
<td>n.hanako@sample.com</td>
<td>千葉県</td>
<td><a href="sample.pdf" download>ファイルをダウンロード</a></td>
<td><label><input type="checkbox" name="pdf[]" value="sample.pdf"/></label></td>
</tr>
</table>
</form>

デモを用意しました。

デモ

ここで紹介しているサンプルは、PHPを使用してPDFファイルをダウンロードする前提で記述しています。そのためcheckboxのnameには配列「pdf[]」を設定しています。
次回は、jqueryとphpを使用してzipでファイルの一括ダウンロードプログラムをメモしたいと思います。