% cat

jQueryでのよくあるフォーム操作まとめ

たまーーーにあれどうやるんだっけ?ということがあるので、jQueryでよくあるフォーム操作についてまとめました。

テキストボックス

値を取得する

jQuery("input['name=target']").val();

セレクトボックス

singleとmultipleで微妙に違ってます。

選択している値を取得する(single)

jQuery("input['name=target'] option:selected").val()

option:selectedはなくてもOK

選択しているテキストを取得する(single)

jQuery("input['name=target'] option:selected").text()

こっちはoption:selectedがないと全部のテキストがとれてしまいます。

選択している値を取得する(multiple)

jQuery("input['name=target'] option:selected").each(function() {
	 data.push(jQuery(this).val());
}

もしくは

jQuery("input['name=target']").val();

だけでも配列で取得できます。

選択しているテキストを取得する(multiple)

jQuery("input['name=target'] option:selected").each(function() {
	data.push(jQuery(this).text());
}

複数選択なのでループさせます。

選択させる

jQuery("input['name=target']").val("hogehoge")  //valueで指定
jQuery("select[name='target']").prop("selectedIndex", index)    //indexで指定

要素の追加

jQuery("input['name=target']").append(jQuery('<option value="1">test1</option>'));

普通にappendでoptionタグを追加します。

ラジオボタン

選択している値を取得

jQuery("input['name=target']:checked").val()

checkedが肝

チェックボックス

選択している値を取得

jQuery("input[name='target']:checked").each(function() {
	data.push(jQuery(this).val());
}

セレクトボックスみたいに自動で配列で取得してくれないのでループさせる必要があります。

チェックON / OFF(単体)

var checkflg = jQuery("#target").attr("checked");
if(checkflg) {
	jQuery("#target").attr("checked", false);
}else{
	jQuery("#target").attr("checked", true);
}

attrを使ってchecked属性の値を操作します。

チェックON / OFF(全部)

jQuery("input[name='target']").attr("checked", true);   //全チェック
jQuery("input[name='target']").attr("checked", false);  //全チェック外し

よくある「全てにチェック」をいれると全部のチェックをいれるやつです。

テキストボックス

jQuery("textarea[name='target']").text()

text()で値を操作できます。

最新記事

「良いプロダクト」とは、どんなプロダクトのことでしょうか?

こんにちは! プロダクトオーナー兼開発部マネージャーをしている長谷川([@roki1801](https://github.com/roki1801))です。普段は山形県山形市にあるベーシックのサテライトオフィス「[山形ラボ](...

roki1801
2019年03月29日

大量アクセスに耐え得る在庫管理システムの構成を考え実装してみた

皆さん「在庫管理」ってどうしてます?itemsテーブルに、stockカラム作ってdecrementしてますか? まぁ正直、それでも良い感じしますよね。楽だし何やってるかわかりやすい。 しかし! **超人気商品に超ア...

mmusasabi
2019年03月13日

kubernetes で Ruby on Rails を動かして kubern...

巷で話題の kubernetes ですが、とってもとってもとっつきにくいですよね そんな kubernetes ですが手元で動かすことができたので解説してみます (情報が間違ってたらごめんなさい! 🙇) 目標はこちら ...

tkhr0
2019年03月07日