jQueryでname属性の取得、追加、複数操作の方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

HTMLフォームなどでよく使うname属性を取得したり、値を追加する方法です。

複数のname属性を取得したり、部分一致のname属性を取得する方法も併せてご紹介します。

name属性を取得

name属性を取得して値を表示させたり、追加したりできます。

input要素のvalue値を追加

HTML

jQuery

結果

上記のようにテキストフォームにvalue値が追加されました。

その他フォームのvalue値を追加

textareacheckboxなど、さまざまな要素のname属性を取得する方法をご紹介します。

HTML

jQuery

結果



上記のようにテキストエリア、チェックボックス、ボタンに値が追加されました。

テキストエリアも.val()で追加しましょう。

基本構文

$( ‘ 要素 [ name = “name属性値” ] ‘ )

inputtextareaなどの要素を記述し、そのあとに[](角カッコ)でname属性を指定します。

name属性の値はクオーテーションで囲ってあげましょう。

部分一致での取得

name属性は、完全一致の値ではなくても取得できます。

一気に見てみましょう。

jQuery

説明

name属性と要素の間に、特定の記号と=(イコール)を挿入することで、部分一致などの検索ができます。

詳しくは下記一覧表をご覧ください。

記号検索条件説明
*=部分一致指定した属性の値を「含む」要素
^=前方一致指定した属性の値から「始まる」要素
$=後方一致指定した属性の値で「終わる」要素
!=否定指定した属性の値を「除く」要素

ボタンをクリックしたら値を出力

フォームから取得した値を出力するサンプルです。

HTML

jQuery

結果(動作サンプル)

下記フォームに適当なテキストを入力し、クリック!ボタンを押すと、入力内容がフォームの下に出力されます。





 
 
 

上記のように入力した値が出力されました。

複数のフォームから取得

for()each()などのループ処理を使い、複数のフォームを操作します。

複数のフォームに値を追加

まずは空のフォームに値を追加します。

HTML

jQuery

結果



1つずつフォームに追加されました。

説明

①配列を変数に格納

[](角カッコ)内に、カンマ区切りで値を入れると配列になります。

②配列の値を1つずつループ処理

参考:for文で繰り返し処理

③複数のフォームに1つずつ値を格納

①で格納した配列の値をeq(i)で順番を指定しながら追加しています。

iには順番を示す番号が格納されていますので、ループしながらeq(0)eq(1)…と進んでいきます。

eq()は以下のようになります。

  • eq(0) => 高崎
  • eq(1) => 前橋
  • eq(2) => 太田

参考:jQueryのeq()で順番を指定する方法

複数のフォームの値を出力

ボタンをクリックすると。フォームの値が出力されます。

HTML

jQuery

結果(動作サンプル)

下記クリック!ボタンを押すと、入力内容がフォームの下に出力されます。





 
 
 

上記にフォームの中身が出力されたかと思います。

説明

①指定した要素をループ処理

each()function()に引数を指定すると、連番が取得できます。

②複数フォームから1つずつ値を出力

フォームの値をeq(i)で順番を指定した要素に追加し、出力しています。

参考:each()で複数の要素をループ処理

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*