フォームを操作する方法 (input / select) [jQuery]

値を取得する

テキストボックスに入力されたテキストを取得する。

let value = $('input[type="text"][name="textbox1"]').val()

ドロップダウンリストの選択値を取得する。

let value = $('#select').val()

ドロップダウンリストで選択された項目の value 属性値を取得する。

let value = $('#select option:selected').val()

参考：

セレクトボックスの選択要素を抽出 – Qiita

オプションを選択する

特定の value 属性値を持つオプションを選択する。

$('#select option[value="1"]').prop('selected', true)

参考：

フォーム操作、input・select の値 (value) 取得のあれこれ – Qiita

チェックボックスを操作する

チェックを付けるには、prop メソッドで checked に true を設定する。

$('#checkbox').prop('checked', true)

チェックを外すには、prop メソッドで checked に false を設定する。

$('#checkbox').prop('checked', false)

チェックボックスの状態を取得するには、prop メソッドで checked の値を読み出す。

let checked = $('#checkbox').prop('checked')
// チェックあり → true
// チェックなし → false

参考：

jquery でチェックボックスにチェックを入れるには prop を使え – Qiita

jQuery でチェックボックスやラジオボタンの状態を取得する | たねっぱ！

jQuery チェックボックスの値を取得／設定するサンプル | ITSakura

jQuery でチェックボックスのチェック状態を取得する | iPentec

要素にフォーカスを移す (focus)

参考：

focus() – jQuery で要素にフォーカスを当てる | UX MILK

.focus() | jQuery 日本語リファレンス (js STUDIO)

.focus() | jQuery API Documentation [Official]

フォーカスの当たっている要素を取得する

セレクタで :focus 疑似クラスを指定して要素を取得する。

var $focused = $(':focus');

参考：

focus の当たっている要素を取得する方法 | 日々精進

:focus | jQuery 日本語リファレンス (js STUDIO)

How to get the focused element with jQuery? – Stack Overflow