0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

jQueryでformを操る【nameの値を取得する】

form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使えば「さくッ」と取得できて便利。今回は、nameの値を取得する、にフォーカスします。

inputのvalue値

サンプル
<input type=”” name=”sample” value=”” />

type=”text”

$(‘[name=sample]‘).val();

type=”radio”

$(‘[name=sample]:checked‘).val();

チェックがない場合は「undefined」が返ってきます(Firefox 23で確認)。

type=”checkbox”

$(‘[name=sample]:checked’).map(function(){

return $(this).val();

}).get();

チェックボックスは複数チェックさせることもあるため、そのケアも必要。
この例だと値がセットされた配列を取得できる。
チェックがない場合は「undefined」が返ってきます(Firefox 23で確認)。
チェックがない場合は「[]」と空の配列が返ってきます(Firefox 29で確認)。

selectのvalue値

サンプル
<select name="sample_select">
<option value="">ラベルテキスト</option>
</select>

$(‘[name=sample_select]’).val();

複数選択可能なmultipleのときも取得方法は同様。単数のときはテキストを取得するのに対し、multipleのときは配列で取得する。