jQueryでチェックボックスの全チェック&チェック解除する方法
2024/02/25
フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」という機能をつけたかった。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()を使うのが良いらしい。
リファレンス
関連記事
-
-
jQueryのfind実行時に複数のセレクタを指定する方法
jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法
jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...