作成日:2017-12-07, 更新日:2024-03-22
各値の取得
- テキストエリア、テキストフィールド、セレクト
-
$(〇〇〇).val()
※セレクトタグで複数許可してるときは配列で返ってくる
- セレクトの「value」の値じゃなくて文字列
-
$('[name=〇〇〇] option:selected').text()
※選択されている「<option value="△△△">☆☆☆</option>」の「☆☆☆」
- ラジオボタン
-
$(〇〇〇:checked).val()
- チェックボックス(配列で返ってくる)
-
var aryVal = $('〇〇〇:checked').map(function(index, el) { return $(this).val(); }).get();
※「get()」がないとオブジェクトになる
- チェックボックス(CSVで返ってくる)
-
var aryVal = $('〇〇〇:checked').map(function(index, el) { return $(this).val(); }).get().join();
※「get().join()」にする
- hash形式の取得(「<input type="〇〇〇" name="r_val[]" value="〇〇〇" />」みたいなヤツ)
-
// 「[」「]」をエスケープする(※エスケープさせる文字もエスケープさせる必要あり) var tmpDom = $('[name=r_val\\[\\]]'); // 引用符で囲むってのもアリ // var tmpDom = $('[name="r_val[]"]');
- 基本
-
$(〇〇〇).val(値);
- チェックをつける
-
$(〇〇〇).prop('checked', true);
- チェックを外す
-
$(〇〇〇).prop('checked', false);
selectタグで選択されたoptionの属性値
▼基本型
$('select option:selected').〇〇〇();
▼changeイベントとの兼ね合いのサンプル
<select> <option value="〇A〇" data-foo="〇A〇">〇A〇</option> <option value="〇B〇" data-foo="〇B〇">〇B〇</option> </select> <script> $(〇〇〇).on('change', '〇〇〇', function(){ // 選択されたoptionの「data-foo」の値 var dataFoo = $(this).find('option:selected').data('foo'); // 選択されたoptionのvalueだったら「option:selected」は無くて大丈夫 var val = $(this).val(); }); </script>
チェックボックスがチェックされているか
$(〇〇〇).on('click', '〇〇〇', function(){ if ( $(this).prop('checked') ) { // チェックされている } else { // チェックされていない } });
各値のセット
※selectタグも同じ
チェックボックスなどのチェックをつける
disabledやreadonly属性のon/offも同様
「prop()」を使う。