勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryでチェックボックスの全チェック&チェック解除する方法

   2024/02/25  jQuery

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」という機能をつけたかった。jQueryで出来たのでメモ。

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function allCheck( mode ){
    var change = ( mode ) ? true : false;
    $('input[name=test]').prop('checked', change);
}
</script>
</head>
<body>
    <a href="javascript:void(0);" onclick="allCheck(1);">全てチェック</a><br>
    <a href="javascript:void(0);" onclick="allCheck(0);">チェックを外す</a><br>

    <input type="checkbox" name="test" value="1">1<br>
    <input type="checkbox" name="test" value="2">2<br>
    <input type="checkbox" name="test" value="3">3<br>

</body>
</html>

 

prop()

prop(name)で指定した属性の値を取得、prop(name, value)で指定した属性の値を設定できるみたい。attr()と似ているけどinput関連の値を触る時はprop()で、その他はattr()を使うのが良いらしい。

 

リファレンス

http://js.studio-kingdom.com/jquery/attributes/prop

 - jQuery

  関連記事

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法

jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...

簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...