[jquery]tagやformに値を設定する

jqueryは最近はもうあまり使うことがないですが、前回のこの記事とか見てくれている人が多いようなので、
jquery関連についても、ネタがない時に少しづつ書いてみます…

今回は、jqueryでフォーム(text/radio/select/checkbox)やタグに値を設定する方法を記載しています。それぞれにcodepenでサンプルを作りました。ボタンを押すと挙動確認できます！

HTMLタグに値を設定する

htmlタグを設定するときは下記のように、html関数にタグを渡します。

$("#test1").html("<p>hoge</p>");

上記だと、id="test1"が設定されているタグの配下に

hoge

をセットします。 pタグが反映されて画面描画されます、既に内容がある場合は上書きされます。

divやpタグなど、子要素を持てるタグには基本的には書くことができます。

See the Pen [jquery] value setting1 by yasuaki (@include777) on CodePen.

ただの文字列を設定するときは下記のように、text関数に文字列を渡します。

$("#test2").text("<p>hoge</p>");

上記だと、id="test2"が設定されているタグの配下にhogeをセットします。 htmlタグを渡しても、文字列として表示されます、既に内容がある場合は上書きされます。

See the Pen [jquery] value setting2 by yasuaki (@include777) on CodePen.

テキストエリアに値を設定する場合は、val関数に設定する値を渡します。

$("input[name='user_name']").val("テストユーザー");

上記だと、name属性にuser_nameが設定されているinputタグにテストユーザーという文字列がセットされます。

See the Pen [jquery] value setting3 by yasuaki (@include777) on CodePen.

セレクトボックスに値を設定する場合は、val関数に設定する値を渡すとoptionが選択された状態になります。

$("#test4").val(2);

See the Pen [jquery] value setting4 by yasuaki (@include777) on CodePen.

特定のチェックボックスをチェックする場合は、idなど一意に特定できるセレクターを使って、prop関数にcheckedとtrueを渡します。

$("#test5_2").prop('checked', true);

全てのチェックボックスをチェックする場合は、全てのチェックボックスを選択できるセレクターを使って、prop関数でcheckedをtrueに設定します。

$("input[name='test5']").prop('checked', true);

逆にfalseにすると、全てのチェックボックスのチェックが消えます。

$("input[name='test5']").prop('checked', false);

See the Pen [jquery] value setting5 by yasuaki (@include777) on CodePen.

idなど一意に特定できるセレクターを使って、prop関数にcheckedとtrueを渡します。

$("#test62").prop("checked", true);

See the Pen [jquery] value setting6 by yasuaki (@include777) on CodePen.