[jQuery]フォーム操作、input・selectの値（value）取得のあれこれ #jQuery

jQueryを使ってinputやselectの値を取得する方法をまとめました。
備忘録のため、箇条書きの簡単なまとめとなり分かりにくい点があるかもしれませんが、ご了承ください。

input（テキスト）の操作

ターゲットとなるinput（テキスト）

<input type="text" name="hoge" value="あいうえお" data-target="fuga" id="input-1" class="target">

値（value）を取得

class（もしくはid）から値（value）を取得

var target = $('.target').val();

※idから値を取得する場合は$('#input-1')と書き換えればOK

name値から値（value）を取得

var target = $('input[name="hoge"]').val();

data属性から値（value）を取得

var target = $('input').data('target','fuga').val();

もしくは

var target = $('input[data-target="fuga"]').val();

値（value）から要素を選択

基本の書き方

var target = $('input[value="あいうえお"]');

値（value）からclassを取得

var target = $('input[value="あいうえお"]').attr('class');

id、name値も同様でattr('id') or attr('name')と指定すればOK。

値（value）からdata値を取得

var target = $('input[value="あいうえお"]').data('target');

値（value）を任意のテキストに変更

$('.target').val('テキスト');

値（value）を空にする

$('.target').val('');

input（チェックボックス、ラジオボタン）の操作

ターゲットとなるチェックボックス（ラジオボタンも基本同じ）

<input type="checkbox" name="hoge" value="あいうえお" data-target="fuga" id="check-1" checked>
<label for="check-1">あいうえお</label>

<input type="checkbox" name="hoge" value="かきくけこ" data-target="foo" id="check-2">
<label for="check-2">かきくけこ</label>

チェックした値（value）を取得

name値からチェックした値を取得

チェックが1点のみの場合

var target = $('[name="hoge"]:checked').val();

チェックが複数ある場合

 $('[name="hoge"]:checked').map(function() {
    target = $(this).val();
});

classからチェックした値を取得

var target = $('.target:checked').val();

チェックが複数ある場合はname値から取得する場合と同様

任意の値をチェックする or チェックを外す

値（value）からチェックする or チェックを外す

// チェックする
$(function() {
    $('[name="hoge"]').val('かきくけこ').prop('checked',true);
    return false;
});

// チェックを外す
$(function() {
    $('[name="hoge"]').val('あいうえお').prop('checked',false);
    return false;
});

[name="hoge"]で どのセレクトボックスかを指定しているので、classやidから指定する場合は$('.target option[value="1"]')と指定すればOK

class（もしくはid）からチェックする or チェックを外す

// チェックする
$(function() {
    $('.target').prop('checked',true);
    return false;
});

// チェックを外す
$(function() {
    $('.target').prop('checked',false);
    return false;
});

該当のclassを持つ複数要素に適用されるので要注意。
idも同様で$('#check-1')と指定すればOK。

select（セレクトボックス）の操作

ターゲットとなるセレクトボックス

<select name="hoge" data-target="fuga" id="select-1" class="target">
    <option value="" checked>default</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

選択した値（value）を取得

class（もしくはid）から値（value）を取得

var target = $('.target option:selected').val();

idも同様で$('#select-1 option:selected')と指定すればOK。

name値から値（value）を取得

var target = $('[name="hoge"] option:selected').val();

data属性から値（value）を取得

var target = $('select[data-target="fuga"] option:selected').val();

任意の値を選択する or 選択を外す

// 選択する
$(function() {
    $('[name="hoge"] option[value="1"]').prop('selected',true);
    return false;
});

// 選択を外す
$(function() {
    $('[name="hoge"] option[value="1"]').prop('selected',false);
    return false;
});

[name="hoge"]で どのセレクトボックスかを指定しているので、classやidから指定する場合は$('.target option[value="1"]')と指定すればOK

以上になります。

特にcheckbox・radioの選択・解除や、セレクトボックスの値を取得する方法を毎回調べてしまうので一覧にしておくと便利かなと思いここに残しておきます。
textareaは操作が必要な機会がなかったので今回は省きましたが、もしかしたら今後追記するかもしれません。

お役に立てたら幸いです。