jQueryでのform値設定方法(checkbox,radio,selectなど)

忘れがちなのでまとめておく

とくに checkbox, radio, select がどうだったかを忘れがち。
以下にまとめておく
(2014/03/19 Chrome 調べ)

text系 (input type=”text”, type=”hidden”, textarea など)

普通にval()を呼び出して設定する。

//例:
$('input').val('設定値')

select

普通にval()を呼び出して設定する。
ただし、multipleを設定するする場合は配列を指定する。
(multipleでなくても配列でもOK)

//例:
$('select').val('選択するoptionの値')

//例:複数の場合
$('select').val(['値1', '値2'])

checkbox, radio

val()に常に配列で設定する。
配列でない場合は、チェックされた時の値が変わってしまうため要注意

//例:
$('radio').val(['チェックを付けたいradioの値'])

//例:複数にチェックを付ける場合は複数指定
$('checkbox').val(['チェック値1', 'チェック値2'])

ちなみに

text系に配列で設定しても、ちゃんと入った。
さらに複数設定した場合はカンマでjoinされた値が入った。
あまり使用しないほうが良いと思うが。。。

//例:
$('input:text').val(['xxx'])
// => xxx が設定される

//例:
$('input:text').val(['1', '2'])
// => 1,2 が設定される

---

Written with StackEdit.

jQueryでfindとchildrenを使い分ける

findとchildren

findとchildrenはどちらも指定した要素が持つ子要素を取得するメソッドです。二つの詳しい書式は以下の通りです。

find

find(String or 条件式)

findは指定要素が持つ全子孫要素から、指定条件式に合致するものを取得します。この関数は、処理中の要素から更に絞込みをかけるのに非常に便利です。
children

children(String or 子要素を絞り込む条件式)

childrenは要素内の全ての子要素を取得します。取得される要素は直下にある子要素のみで、孫要素以下は対象外となります。子要素以外を取得する場合は、条件式を渡して取得される子要素を更に絞り込むことで取得することができます。

findとchildrenの使い分け

childrenが直下の要素だけを取得するのに対し、findは全ての子要素を探索するという違いがあります。childrenでfindと同じことができなくもありませんが、一般的にはfindが多く使われます。findは強力な検索機能を持っており、コードもすっきり書くことができます。

<div>
  <ul>
    <li><a href="./aaa.html">あいうえお</a></li>
    <li><a href="./bbb.html">かきくけこ</a></li>
    <li><a href="./ccc.html">さしすせそ</a></li>
  </ul>
</div>

例えば上記のようなdivから一番最後のリンク先を取得したい場合は以下のようになります。

$("div").find("li:last>a").attr("href");

逆にchildrenは直下の子要素だけをまとめて取得したい場合に用いられます。

<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ul>

上記のようなリスト構造があったとき、子要素であるliの値をすべて取得するには以下のようになります。

$("ul").children();

直下の要素に限定してまとめて取得したい場合はchildrenが良いとされています。

以上こちらのサイトを参考にさせていただきました。

jQueryのセレクタ

エレメントを選択するにはidやclass、tag、nameなどをセレクタで指定することができます。セレクタで指定した属性のものを取得することができます。

書式

id

$("#idname")

class

$(".classname")

tag

$("tagname")

name

$("*[name=名前]”)

使用例

idが”top”の値を取得してみます。

$(“#top”).val()

classが”top”の値を取得してみます。

$(“.top”).val()

tagが”h1”の値を取得してみます。

$(“h1”).val()

name属性が”top”の値を取得してみます。

$("*[name=top]”).val()

ie8でjQueryを禁じられる

親の tr を取得するメソッドを自作してみた。 match の tr の部分を変えたり、引数に変えたりすると応用がきくかも。

function getParentTr(elm) {
  if (elem === document) return undefined;
  return  !elm || elm.tagName.match(/tr/i) ? elm : getParentTr(elm.parentNode);
}

再起っていいな。