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

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

#1. textbox
###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

<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

<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

<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メソッドを利用して配列取得

const hobby = []
$('input[name=hobby]:checked').each(function(index, element) {
  hobby.push(element.value);
});

###mapメソッドを利用して配列取得

$('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

<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

<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は重複してしまうとおかしい動作になる場合があります。

以上