.NET開発者のためのブログメディア
jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介
- SE
- changeメソッドの使い方について教えてください。
- PM
- changeメソッドとは値が変更されたときにイベントを発生させるメソッドです。詳しい使い方を見ていきましょう。
目次
jQueryでのchangeメソッドの使い方とは？
今回は、jQueryでのchangeメソッドの使い方について説明します。changeメソッドを利用すれば、値変更時のリアルタイム反映ができます。
ここでは、「textボックス」「selectボックス」「チェックボックス」「radioボタン」における、変更時のリアルタイム反映について、ソースコードと共に紹介します。
jQueryでのchangeメソッドの使い方に興味のある方はぜひご覧ください。
textボックス
jQueryでの、textボックス変更時の処理について、HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
名前1：<input type="text" name="name1" size="40" maxlength="20">
<p id="name1"></p>
名前2：<input type="text" name="name2" size="40" maxlength="20">
<p id="name2"></p>
</body>
</html>
|
name1のtextボックスは、changeメソッドで変更時に値を取得して表示します。name2のtextボックスは、keyupメソッドで、keyup時に値を取得して表示します。
タイミングの違いを確認してみてください。
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(function() {
// textボックスの変更時
$('input[name=name1]').change(function() {
// valueを取得
let val1 = $(this).val();
// p要素に出力（id:name1）
$('#name1').text(val1);
});
// keyup時
$('input[name=name2]').keyup(function() {
// valueを取得
let val2 = $(this).val();
// p要素に出力（id:name2）
$('#name2').text(val2);
});
});
|
実行結果は以下のようになります。
See the Pen
jquery_change1 by kskumd (@kskumd)
on CodePen.
selectボックス
jQueryでの、selectボックス変更時の処理について、HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
選択肢：
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<p></p>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
$(function() {
// selectボックスの変更時
$('select').change(function() {
// textの取得
let text = $('option:selected').text();
// 結果の出力
$('p').text(text);
});
});
|
実行結果は以下のようになります。
See the Pen
jquery_change2 by kskumd (@kskumd)
on CodePen.
selectボックスの変更時にchangeメソッドで値が取得できていることが分かります。
radioボタン
jQueryでの、radioボタン変更時の処理について、HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
選択肢：
<input type="radio" name="evaluation" value="good" checked="checked">良い
<input type="radio" name="evaluation" value="normal">普通
<input type="radio" name="evaluation" value="bad">悪い
<p></p>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
$(function() {
// radioボタンの変更時
$('input[type="radio"]').change(function() {
// valueの取得
let val = $(this).val();
// 結果の出力
$('p').text(val);
});
});
|
実行結果は以下のようになります。
See the Pen
jquery_change3 by kskumd (@kskumd)
on CodePen.
radioボタンの変更時にchangeメソッドで値が取得できていることが分かります。
チェックボックス
jQueryでの、チェックボックス変更時の処理について、HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
チェック
<input type="checkbox" name="check" value="pvalue" id="pid">
<p></p>
</body>
</html>
|
jQueryは以下のように記述します。チェック状態はpropメソッドで取得しています。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(function() {
// checkBoxの変更時
$('input[name="check"]').change(function() {
// チェック状態を取得
let checked = $('#pid').prop('checked');
// チェック状態がONの場合
if (checked) {
// 結果の出力
$('p').text('チェックON');
} else {
// 結果の出力
$('p').text('チェックOFF');
}
});
});
|
実行結果は以下のようになります。
See the Pen
jquery_change4 by kskumd (@kskumd)
on CodePen.
チェックボックスの変更時にchangeメソッドで値が取得できていることが分かります。
- SE
- イベントをリアルタイムに発生させることも、意図的に発生させることも可能なメソッドなんですね。
- PM
- ここではリアルタイムなイベント発生を実際のコードで見ていきました。他にも注意する点がありますので、実際にコードを書いて理解を深めていきましょう。
まとめ
いかがでしたでしょうか。
jQueryでのchangeメソッドの使い方について説明しました。changeメソッドを利用すれば、値変更時のリアルタイム反映ができます。
ここでは、「textボックス」「selectボックス」「チェックボックス」「radioボタン」における変更時のリアルタイム反映について、ソースコードと共に紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)