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


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

## input（テキスト）の操作

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

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

### 値（value）を取得

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

```javascript
var target = $('.target').val();
```
※idから値を取得する場合は```$('#input-1')```と書き換えればOK


#### name値から値（value）を取得

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

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

```javascript
var target = $('input').data('target','fuga').val();
```
もしくは

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



### 値（value）から要素を選択

#### 基本の書き方

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

#### 値（value）からclassを取得

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

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

#### 値（value）からdata値を取得

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

### 値（value）を任意のテキストに変更
```javascript
$('.target').val('テキスト');
```

### 値（value）を空にする
```javascript
$('.target').val('');
```


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

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

```html
<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点のみの場合

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

##### チェックが複数ある場合

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

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

```javascript
var target = $('.target:checked').val();
```
* チェックが複数ある場合はname値から取得する場合と同様

### 任意の値をチェックする or チェックを外す
#### 値（value）からチェックする or チェックを外す

```javascript
// チェックする
$(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 チェックを外す
```javascript
// チェックする
$(function() {
	$('.target').prop('checked',true);
	return false;
});

// チェックを外す
$(function() {
	$('.target').prop('checked',false);
	return false;
});
```
* 該当のclassを持つ複数要素に適用されるので要注意。
* idも同様で```$('#check-1')```と指定すればOK。

## select（セレクトボックス）の操作
ターゲットとなるセレクトボックス

```html
<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）を取得
```javascript
var target = $('.target option:selected').val();
```
* idも同様で```$('#select-1 option:selected')```と指定すればOK。

#### name値から値（value）を取得
```javascript
var target = $('[name="hoge"] option:selected').val();
```

#### data属性から値（value）を取得
```javascript
var target = $('select[data-target="fuga"] option:selected').val();
```

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

```javascript
// 選択する
$(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は操作が必要な機会がなかったので今回は省きましたが、もしかしたら今後追記するかもしれません。

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