jQueryでHTMLフォームの値を操作する(取得・変更・削除)まとめ

jQueryでHTMLのformのタグから値を取得したり、変更したり、削除する方法です。inputでもtextやradioがあったり、selelctやtextareaなどいろいろなタグがあると思うので1つにまとめたら楽かなと思いまとめました。

jQueryでHTMLフォームの値を操作する(取得・変更・削除)まとめ

作成日
2015/04/14
更新日
2016年8月16日

jQueryでHTMLフォームを操作したいときがあると思います。フォームの値を取得したり、属性値を変更したり、jQueryUIやCSSなどでユーザーインターフェースを高めたいときなどなど。それらをまとめていきたいと思います。formの中に入れれる要素としてテキストタイプやラジオタイプのinputや、textarea、selectなど色々なタグがあるので、一つのページにまとめたら楽かなと思い今回の記事を書くことにしました。

input[type=”text”]:テキストタイプのインプット

通常のテキストを入力するテキストタイプのinputです。他にも「type=”password”」や「type=”email”」、「type=”hidden”」も同じような形式になります。
デモ1

HTMLの例

分かりやすいようにIDを振っています。

valueを取得する

取得するためには「val()」を利用します。これはtextareaでも取得できます。

valueを変更する

「val()」の引数に文字列を指定することで、その文字列を当てはめることができます。

valueを削除

単純に「val()」に渡す引数を「”」にしてinputのvalueを削除します。

input[type=”radio”]:ラジオタイプのインプット

ラジオボタンではチェックの対象が複数あるため、ターゲットを絞り方に困ることがあるかもしれませんが、「$(‘input[name=”test”]’)」のようにname属性で指定することで、同じラジオをターゲットにすることができます。
デモ2

HTMLの例

分かりやすいようにIDを振っています。

チェックされているものを取得する

ラジオボタンでチェックをされているものを取得する方法です。これもターゲットの絞り方を工夫して「val()」で指定できますが、何もチェックされていない場合は「undefined」が返されるので、条件分岐を追加しています。

チェックする

「attr()」ではうまく引き渡せないことがあるので「prop(‘checked’, true)」を使っています。またチェックを付けるだけで動作してはいますが、一応該当のラジオボタンと同じname属性を持つラジオボタンのチェックを外しています。

チェックを外す

チェックを外すときは前の項目に書いてあるように「prop(‘checked’, false)」を利用します。

input[type=”checkbox”]:チェックボックスタイプのインプット

チェックボックスは複数チェックすることができるため、取得には一工夫が必要です。チェックの削除は、ラジオボタンよりも簡単かもしれません。
デモ3

HTMLの例

分かりやすいようにIDを振っています。

チェックされたvalを取得する

チェックボックスは複数選択されている場合があるため、nameで指定したinputをeach()で回しています。この例では変数「val」に追加していますが、配列にpush()で追加した方がデータとしては扱いやすいかもしれません。以下の例では、全てチェックされている場合、textに”「HTML」、「CSS」、「jQuery」がチェックされています。”と入ります。また、何も選択されていない場合もあるので、prop(‘checked’)で判別してチェックがあるものだけテキストを変数valにvalueを追加、テキストが追加されていなければ(変数valに何も入っていなければ)チェックされていないということになります。

チェックする

チェックボックスのチェックはラジオボタンと同じように「prop(‘checked’,true)」を使います。

チェックを外す

チェックボックスのチェックを外す場合においてもpropの第二引数を「false」にしてあげれば外れます。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Category

Archive