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()を使うのが良いらしい。
リファレンス
関連記事
-
-
summernoteにギャラリーから画像を挿入する機能を追加する方法
summernoteの画像機能はデフォルトだと「画像ファイルを選ぶ」「URLから ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
-
オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...
-
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...