JavaScriptプログラムに関する各種メモ書き

jQuery でのフォーム操作

● フォームの種類を判別する( 例 : checkbox か radioか)

alert( $('#hoge').prop('type') );

● タグ名からフォームの種類を判別する( 例 : SELECT を判別 )

if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}

● 1行テキストエリア(id="hoge")の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >
//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア(id="hoge")へ値('test_string')をセットする

//  jQuery
$('#hoge').val('test_string');

● オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge :selected').text();

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

$( "[name='my_radio']" ).prop('checked', false);

● 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● 「全てを選択する」ボタンを押すと全てのチェックボックスのチェックを付ける

id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける(または解除)します
html

<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">

js

$("#all_check_on").click(function() {
    if ($(this).prop("checked")) {
        $('[name="user_id[]"]').prop("checked", true);
    } else {
        $('[name="user_id[]"]').prop("checked", false);
    }
});

● チェックされている複数チェックボックスの値をURLパラメーターの形式で取得する

name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js

param = $('[name="user_id[]"]:checked').map(function(){
	return this.name + '=' + $(this).val();
}).get().join('&');

console.log( param );

表示結果

user_id[]=1&user_id[]=2

● フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

● (id="input_button")の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト(class="my_list")を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例:全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});

関連エントリー

No.666
09/21 10:23

edit

prototype.js
jQuery
フォーム