【jQuery】フォーム部品の取得・設定まとめ

#テキスト
```html:html
<input type="text" id="area" value="関東">
```

###value値取得
```js:値取得
var area = $('#area').val();
console.log(area); //=>"関東"
```
###value値設定
```js:値設定
$('#area').val('関西');
```

#ラジオボタン

```html:html
<label><input type="radio" name="area" value="0" checked>関東</label>
<label><input type="radio" name="area" value="1">関西</label>
```

###選択されたラジオボタンのvalue値を取得
ラジオボタンが未選択の場合は、｢undefined｣になるので要注意。

```js:選択されたラジオボタンのvalue値を取得
var area_val = $('[name=area]:checked').val();
console.log(area_val); //=>0
```

###選択されたラジオボタンのテキストの取得
```js:選択されたラジオボタンのテキストの取得
var area_text = $('[name=area]:checked').parent('label').text();
console.log(area_text); //=>関東
```

###ラジオボタンにチェックを入れる
val()とprop()の二通りの方法がある。
attr('checked', true)は使えないので注意。

```js:ラジオボタンにチェックを入れる（val）
//ラジオなので値が一つだが、配列で渡す必要がある。
$('[name=area]').val(['0']);
```

```js:ラジオボタンにチェックを入れる（prop）
$('[name=area][value=0]').prop('checked',true);
```

###ラジオボタンのチェックを外す
```js:ラジオボタンのチェックを外す
$('[name=area]').prop('checked',false);
```

###ラジオボタンにチェックが入っているかの判定
prop('checked')でチェックされていればtrueが、されていなければfalseが返る。

```js:ラジオボタンにチェックが入っているかの判定
if($('[name=area]').prop('checked')){
 //チェックされていた場合
}

if(!$('[name=area]').prop('checked')){
 //チェックされていない場合
}
```


#チェックボックス
```html:html
<label><input type="checkbox" class="area" value="0">関東</label>
<label><input type="checkbox" class="area" value="1">関西</label>
```

###チェックが入ったチェックボックスのvalue値取得
:checkedでチェックが入っているものを選択する。

```js:関東にチェックが入っている場合
var area = $('.area:checked').val();
//=>0
```

ただし、**val()はセレクタに合致した最初の要素のみを取得するので**、該当するチェックボックスが複数の場合は、eachやmapでループさせる必要がある。

```js:選択された値取得(map)
var area = $('.area:checked').map(function() {
  return $(this).val();
});

/*
jQueryオブジェクトが返る。
例えば、関東と関西にチェックを入れている場合は、以下が返る。
[
0: "0"
1: "1"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]
]
*/
```

配列で取得したい場合は、ひと手間get()を最後につける。

```js:選択された値取得(map)
var area = $('.area:checked').map(function() {
  return $(this).val();
}).get();
/*
例えば、関東と関西にチェックを入れている場合は、以下が返る。
[
0: "0"
1: "1"
]
*/
```

###チェックが入ったチェックボックスのテキストの取得

```js:選択されたテキストの取得
var area = $('.area:checked').map(function() {
  return $(this).parent('label').text();
});
/*
jQueryオブジェクトが返る。
例えば、関東と関西にチェックを入れている場合は、以下が返る。

0: "関東"
1: "関西"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]
*/
```

これも配列で取得したかったら最後にget()を追加。

###チェックを入れる
方法はvalとpropの二通りある。

```js:チェックを入れる(val方式)
//値は配列で渡す
$('.area').val(["0","1"]);
```

```js:チェックを入れる(prop方式)
$('.area').prop('checked',true);
```

###チェックをクリアする
```js:チェックをクリアする
$('.area').prop('checked',false);
```

###チェックが入っているかの判定

prop('checked')でチェックされていればtrueが、されていなければfalseが返る。

```js
if($('.area').prop('checked')){
 //チェックされていた場合
}

if(!$('.area').prop('checked')){
 //チェックされていない場合
}
```

###チェックボックスの全選択・全解除
全選択/全解除チェックボックスを変更すると、全てのチェックボックスを変更するサンプル。

```html:html
<ul>
    <li><label><input type="checkbox" id="all" />全選択/全解除</label></li>
    <li><label><input type="checkbox" class="area" value="0" /> 関東</label></li>
    <li><label><input type="checkbox" class="area" value="1" /> 関西</label></li>
</ul>
```

```js:全選択・全解除
$('#all').on('change', function() {
    $('.area').prop('checked', $(this).prop('checked'));
});
```

[よくある全選択チェックボックス jQuery 実装](http://qiita.com/otchy/items/1c63d7a7eb6016ca5d29
)

#セレクト（単一選択）

```html:html
<select id="area">
  <option value=""></option>
  <option value="0">関東</option>
  <option value="1">関西</option>
</select>
```

###選択された項目(option)のvalue値取得

```js
var area = $('#area').val();
```

###選択された項目(option)のテキスト取得
option:selectedをセレクタにするところがポイント。

```js
var area = $('#area option:selected').text();
```

###セレクトボックスの項目(option)を選択

```js:値設定(val)
$('#area').val(0);
//=>valueが0のオプションが選択される。
```

該当のoptionをセレクタにして、propでselectedを設定する方法もある。

```js:値設定(prop)
$('#area option:[value="0"]').prop('selected',true);
//=>valueが0のオプションが選択される。
```

###セレクトボックスのoptionの書き換え
書き換えは、一旦削除して、追加する。
追加はappendで行うが、optionの配列を作成してからまとめてappendしたほうがコストが低いらしい。

```js:書き換え
//削除
$('#area').empty();

//実際はdata属性から取ってくるなど
var list = {0:'東北',1:'関東'};

//optionの配列を作成
var $option = $.map(list,function(value,key){
  $('<option>'{
    value:key,
    text:value
  }
}

//新しいoptionを追加
$('#area').append($option)
```

参考：[jQuery で select タグに option タグを追加する](http://qiita.com/quanon86/items/5822f805d558ad078db3)

###先頭を選択状態にする（クリアする）
セレクタにoption:firstを使うのがポイント。

```js:先頭を選択状態にする
$('.area option:first').prop('selected', true);
```

#セレクト（複数選択）

```html:html
<select id="area" multiple="multiple">
  <option value=""></option>
  <option value="0">関東</option>
  <option value="1">関西</option>
</select>

```

###選択された項目(option)のvalue値取得

```js:値取得
var area = $('#area').val();
```
結果は配列で返される。
関東と関西を選択した場合、以下の形で返る。

```js:取得結果
["0", "1"] 
```

###選択された項目(option)のテキスト取得

```js:選択されたテキスト取得
$('#area option:selected').map(function(){
  return $(this).text();
});
```

結果はjQueryオブジェクトの配列で返る。

```js:取得値
0: "関東"
1: "関西"
context: document
length: 2
prevObject: e.fn.e.init[2]
__proto__: Object[0]
```

###セレクトボックスの項目(option)を選択
配列を渡して値を設定する。｢null｣や空配列を渡すことで未選択状態にすることが可能。
値が1つの場合は、文字列でも可能。このとき、指定された値以外はチェックが外れる

```js:値設定(val)
$('#area').val([0,1]);
```

prop()でも可能。
ただし、val()の時と違いこの方法では、指定された値以外はチェックがそのままとなる。

```js:値設定(prop)
$('#area option:[value="0"]').prop('selected',true);
```

###先頭を選択状態にする（クリアする）

```js:クリア(val)
$('#area').val([]);
```

```js:クリア(prop)
$('#area option:first').prop('selected',true);
```

#textarea
```html:html
<textarea id="area">関東</textarea>
```

###テキスト内容取得
```js:値取得
var area = $('#area').val();
```
###値設定
```js:値設定
$('#area').val('関西');
```


#参考
[jQueryにおけるフォーム値の取得と設定]
(http://jszuki.doorblog.jp/archives/31702159.html)