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

以上