jQuery 要素の値を取得する方法【初心者向けに解説】

jQuery 要素値取得

この記事では、jQueryを使ってHTML要素の値を取得する方法を、初心者の方にもわかりやすく解説します。テキストボックス、ラジオボタン、チェックボックスなど、様々な要素の値を取得する方法を、具体例を交えて紹介します。

jQueryで要素の値を取得：基礎知識

jQueryは、JavaScriptを簡潔に記述できるようにしたライブラリです。HTML要素の操作やイベント処理、アニメーションなどを簡単に行うことができます。jQueryを使うことで、JavaScriptのコードを大幅に減らし、開発効率を向上させることができます。

JavaScriptとの違い

JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。jQueryはJavaScriptで書かれたライブラリであり、JavaScriptの機能を拡張したものです。jQueryを使うことで、JavaScriptで複雑な処理を記述しなくても、シンプルでわかりやすいコードで同じ処理を実現できます。

様々な要素の値を取得する方法

1. テキストボックスの値を取得

テキストボックスの値を取得するには、val() メソッドを使用します。val() メソッドは、要素の値属性（value属性）の値を返します。属性値とは、HTMLタグに直接記述された値のことです。入力値とは、ユーザーが入力した値のことです。

コード例


  <input type="text" id="textbox" value="初期値">

  <script>
    $(document).ready(function() {
      var textboxValue = $("#textbox").val(); 
      console.log(textboxValue); // 出力結果: "初期値"
    });
  </script>

2. ラジオボタンの値を取得

選択されているラジオボタンの値を取得するには、:checked セレクタとval() メソッドを組み合わせます。:checked セレクタは、チェックされているラジオボタンのみを選択します。

コード例


  <input type="radio" name="radio-group" value="value1"> 選択肢1
  <input type="radio" name="radio-group" value="value2" checked> 選択肢2

  <script>
    $(document).ready(function() {
      var selectedValue = $("input[name='radio-group']:checked").val();
      console.log(selectedValue); // 出力結果: "value2" 
    });
  </script>

3. チェックボックスの値を取得

チェックボックスの値を取得するには、単一選択と複数選択の場合によって処理が異なります。

単一チェックボックスの場合


  <input type="checkbox" id="checkbox" value="checkbox-value">

  <script>
    $(document).ready(function() {
      var isChecked = $("#checkbox").prop("checked");
      console.log(isChecked); // 出力結果: true (チェックされている場合) / false (チェックされていない場合) 
    });
  </script>

複数チェックボックスの場合


  <input type="checkbox" name="checkbox-group" value="value1"> 選択肢1
  <input type="checkbox" name="checkbox-group" value="value2" checked> 選択肢2
  <input type="checkbox" name="checkbox-group" value="value3" checked> 選択肢3

  <script>
    $(document).ready(function() {
      var checkedValues = [];
      $("input[name='checkbox-group']:checked").each(function() {
        checkedValues.push($(this).val());
      });
      console.log(checkedValues); // 出力結果: ["value2", "value3"] 
    });
  </script>

4. セレクトボックスの値を取得

セレクトボックスの値を取得するには、val() メソッドを使用します。複数選択が可能なセレクトボックスの場合、val() メソッドは選択されている値の配列を返します。

コード例


  <select id="select-box">
    <option value="value1">選択肢1</option>
    <option value="value2" selected>選択肢2</option>
    <option value="value3">選択肢3</option>
  </select>

  <script>
    $(document).ready(function() {
      var selectedValue = $("#select-box").val();
      console.log(selectedValue); // 出力結果: "value2" 
    });
  </script>

5. テキストエリアの値を取得

テキストエリアの値を取得するには、val() メソッドを使用します。

コード例


  <textarea id="textarea">テキストエリアの初期値</textarea>

  <script>
    $(document).ready(function() {
      var textareaValue = $("#textarea").val();
      console.log(textareaValue); // 出力結果: "テキストエリアの初期値" 
    });
  </script>

まとめ

この記事では、jQueryを使って様々なHTML要素の値を取得する方法を解説しました。val() メソッドや :checked セレクタなどを駆使することで、HTML要素の値を簡単に取得することができます。

jQuery関連の記事

この記事に関するQ&A

質問	回答
jQueryとJavaScriptの違いは何ですか？	jQueryはJavaScriptを簡潔に記述できるようにしたライブラリです。JavaScriptの機能を拡張したものであり、JavaScriptで複雑な処理を記述しなくても、シンプルでわかりやすいコードで同じ処理を実現できます。
`val()` メソッドで属性値と入力値の両方を取得できますか？	`val()` メソッドは要素の値属性の値を返します。ユーザーが入力した値を取得したい場合は、イベント発生時に取得する必要があります。
複数選択可能なセレクトボックスで選択されている値をすべて取得するにはどうすればよいですか？	複数選択可能なセレクトボックスの場合、`val()` メソッドは選択されている値の配列を返します。配列をループ処理することで、すべての値を取得できます。

その他の参考記事:jquery 要素取得