jQueryの入力項目の値設定、取得のまとめ

#はじめに
jQueryは広く使っていたjavascriptライブラリです。
ドキュメントも豊富ですが、入力項目の値設定、取得方法をまとめてみます。

#1. textbox
###html
```html
<label>ユーザー名</label>
<input type="text" name="userName" id="userName" value="山田　太郎" maxlength="32">
```

###idで値取得
`$("#userName").val()`

###nameで値取得
`$("input[name='userName']").val()`

###idで値設定
`$("#userName").val("山田　三郎")`

###nameで値設定
`$("input[name='userName']").val("山田　三郎")`

#2. textarea
###html
```html
<label>プロフィール</label>
<textarea name="profile" id="profile" maxlength="200" cols="50" rows="5">私は山田　太郎です。</textarea>
```

###idで値取得
`$("#profile").val()`

###nameで値取得
`$("textarea[name='profile']").val()`

###idで値設定
`$("#profile").val("私は山田　三郎です。")`

###nameで値設定
`$("textarea[name='profile']").val("私は山田　三郎です。")`


#3. radiobutton
```html
<label>性別</label>
<input type="radio" name="gender" id="genderMale" value="男性" checked><label for="genderMale">男性</label>
<input type="radio" name="gender" id="genderFemale" value="女性"><label for="genderFeMale">女性</label>
```

###checkedの値取得
`$("input[name='gender']:checked").val()`
複数項目があるから、IDで値を取得する書き方はしません。

###IDでcheckedを設定
`$("#genderFemale").attr("checked", true)`

###IDでcheckedを解除
`$("#genderFemale").attr("checked", false)`

###nameでcheckedを設定
`$("input[name='gender']").val(["女性"])`

注意したいのは値を「[]」で囲むことです。下記の書き方は効かないです。
`$("input[name='gender']").val("男性")`

#4. checkbox
###html
```html
<label>趣味</label>
<input type="checkbox" name="hobby" id="hobby01" value="01"><label for="hobby01">読書</label>
<input type="checkbox" name="hobby" id="hobby02" value="02"><label for="hobby02">サッカー</label>
```
###checkedの値取得
複数項目があるから、IDで値を取得する書き方はしません。
radioボタンみたいに下記のように書くと１つ目の値だけ取得されます。
`$("input[name='hobby']:checked").val()`

###eachメソッドを利用して配列取得
```javascript
const hobby = []
$('input[name=hobby]:checked').each(function(index, element) {
  hobby.push(element.value);
});
```

###mapメソッドを利用して配列取得
```javascript
$('input[name=hobby]:checked').map(function(){
   return $(this).val();
}).get()
```

###IDでcheckedを設定
`$("#hobby01").attr("checked", true)`

###IDでcheckedを解除
`$("#hobby01").attr("checked", false)`

###nameで複数項目設定
`$("input[name='hobby']").val(["01", "02"])`

#5. pulldown
###html
```html
<label>職業</label>
<select name="occupation" id="occupation">
  <option value="" selected></option>
  <option value="01">会社員</option>
  <option value="02">学生</option>
  <option value="03">公務員</option>
</select>
```

###idで値取得
`$("#occupation").val()`

###nameで値取得
`$("select[name='occupation']").val()`

###idで値設定
`$("#occupation").val("03")`

###nameで値設定
`$("select[name='occupation']").val("03")`

#6. multiple select
###html
```html
<label>趣味</label>
<select name="interest" id="interest" multiple>
  <option value=""></option>
  <option value="01">読書</option>
  <option value="02">野球</option>
  <option value="03">サッカー</option>
  <option value="04">ネットサーフィン</option>
</select>
```
###idで値取得
`$("#interest").val()`

これで["02", "03"]のような配列を取得できます。

###nameで値取得
`$("select[name='interest']").val()`

###idで値設定
`$("#interest").val(["02", "03"])`

###nameで値設定
`$("select[name='interest']").val(["02", "03"])`

#7. readonlyなどの属性の追加、削除
### 属性追加
`$("#userName").attr("readonly", true)`

### 属性削除
`$("#userName").attr("readonly", false)`
または
`$("#userName").removeAttr("readonly")`

IDとnameの定義に十分注意が必要です。特にIDは重複してしまうとおかしい動作になる場合があります。

以上