jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介

Javascript
プログラミング言語

公開日時: 2021-05-17 　更新日時: 2022-06-06

jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介

この記事でわかること

システム エンジニア: changeメソッドの使い方について教えてください。

プロジェクト マネージャー: changeメソッドとは値が変更されたときにイベントを発生させるメソッドです。詳しい使い方を見ていきましょう。

jQueryでのchangeメソッドの使い方とは？

今回は、jQueryでのchangeメソッドの使い方について説明します。changeメソッドを利用すれば、値変更時のリアルタイム反映ができます。

ここでは、「textボックス」「selectボックス」「チェックボックス」「radioボタン」における、変更時のリアルタイム反映について、ソースコードと共に紹介します。

jQueryでのchangeメソッドの使い方に興味のある方はぜひご覧ください。

textボックス

jQueryでの、textボックス変更時の処理について、HTMLを以下に記載します。

<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>

<html>

<head>

</head>

<body>

名前1：<input type="text" name="name1" size="40" maxlength="20">

名前2：<input type="text" name="name2" size="40" maxlength="20">

</body>

</html>

name1のtextボックスは、changeメソッドで変更時に値を取得して表示します。name2のtextボックスは、keyupメソッドで、keyup時に値を取得して表示します。

タイミングの違いを確認してみてください。

jQueryは以下のように記述します。

$(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);
  });
});

$(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を以下に記載します。

<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>

<html>

<head>

</head>

<body>

選択肢：

<option>option1</option>

<option>option2</option>

<option>option3</option>

</select>

<p></p>

</body>

</html>

jQueryは以下のように記述します。

$(function() {

  // selectボックスの変更時
  $('select').change(function() {
    // textの取得
    let text = $('option:selected').text();
    // 結果の出力
    $('p').text(text);
  });
});

$(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を以下に記載します。

<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>

<html>

<head>

</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は以下のように記述します。

$(function() {
 
  // radioボタンの変更時
  $('input[type="radio"]').change(function() {
    // valueの取得
    let val = $(this).val();
    // 結果の出力
    $('p').text(val);
  });
});

$(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を以下に記載します。

<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>

<html>

<head>

</head>

<body>

チェック

<p></p>

</body>

</html>

jQueryは以下のように記述します。チェック状態はpropメソッドで取得しています。

$(function() {

  // checkBoxの変更時
  $('input[name="check"]').change(function() {

    // チェック状態を取得
    let checked = $('#pid').prop('checked');

    // チェック状態がONの場合
    if (checked) {
      // 結果の出力
      $('p').text('チェックON');
    } else {
      // 結果の出力
      $('p').text('チェックOFF');
    } 
  });
});

$(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メソッドで値が取得できていることが分かります。

システム エンジニア: イベントをリアルタイムに発生させることも、意図的に発生させることも可能なメソッドなんですね。

プロジェクト マネージャー: ここではリアルタイムなイベント発生を実際のコードで見ていきました。他にも注意する点がありますので、実際にコードを書いて理解を深めていきましょう。

まとめ

いかがでしたでしょうか。

jQueryでのchangeメソッドの使い方について説明しました。changeメソッドを利用すれば、値変更時のリアルタイム反映ができます。

ここでは、「textボックス」「selectボックス」「チェックボックス」「radioボタン」における変更時のリアルタイム反映について、ソースコードと共に紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介

jQueryでのchangeメソッドの使い方とは？

textボックス

selectボックス

radioボタン

チェックボックス

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介

jQueryでのchangeメソッドの使い方とは？

textボックス

selectボックス

radioボタン

チェックボックス

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでのforEach文の使い方をご紹介！

jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

JavaScriptのreplaceを解説します！replaceを使用した文字列の置換方法について簡単に紹介！