jQueryフォームセレクタの例
jQueryには、フォーム要素にもっと簡単かつ効率的にアクセスするための多くのフォームセレクタが付属しています。単純なjQueryフォームセレクタのリファレンスです。
1.テキストボックス – $( ‘入力:テキスト’)
テキストボックスを選択するには
$('input:text');
テキストボックスの値を取得するには
$('input:text').val();
テキストボックスの値を設定するには
$('input:text').val("New Text");
2.パスワード – $( ‘入力:パスワード’)
パスワードを選択するには
$('input:password');
パスワード値を取得するには
$('input:password').val();
パスワードの値を設定するには
$('input:text').val("New Text");
3.テキストエリア – $( ‘textarea’)
テキストエリアを選択するには
$('textarea');
テキストエリアの値を取得するには
$('textarea').val();
テキストエリアの値を設定するには
$('textarea').val("New Text in Textarea");
4.ラジオボタン – $( ‘入力:ラジオ’)
ラジオボタンを選択するには
$('input:radio');
選択したラジオボタンオプションを取得するには
$('input:radio[name=radiobutton-name]:checked').val();
最初のオプションボタンを選択するには
$('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true); or $('input:radio[name=radiobutton-name]')[0].checked = true;
リンク://jquery/how-to-select-a-jquery付きラジオボタン/[詳細…]
5.チェックボックス – $( ‘入力:チェックボックス’)
チェックボックスを選択するには
$('input:checkbox');
チェックボックスがオンになっているかどうかを確認するには
$('input:checkbox[name=checkboxname]').is(':checked');
チェックボックスをオンにするには
$('input:checkbox[name=checkboxname]').attr('checked',true);
チェックボックスをオフにするには
$('input:checkbox[name=checkboxname]').attr('checked',false);
リンク://jquery/how-to-select-a-jquery付きラジオボタン/[詳細…]
6.アップロードファイル – $( ‘入力:ファイル’)
ファイルを選択するには
$('input:file');
ファイルの値を取得するには
$('input:file').val();
7.隠し値 – $( ‘input:hidden’)
隠れた値を選択するには
$('input:hidden');
隠された価値を得るには
$('input:hidden').val();
隠し値を設定するには
$('input:hidden').val("New Text");
8.選択(ドロップダウンボックス) – $( ‘選択’)
ドロップダウンボックスを選択するには
$('select') or $('#dropdown-id')
選択したドロップダウンボックスの値を取得するには
$('#dropdown-id').val();
ドロップダウンボックスの値を “China”に設定するには、
$("#dropdown-id").val("China");
9. Submitボタン – $( ‘input:submit’)
送信ボタンを選択するには
$('input:submit');
10.リセットボタン – $( ‘入力:リセット’)
リセットボタンを選択するには
$('input:reset');
jQueryフォームセレクタ
<html> <head> <title>jQuery form selector example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:16px; } </style> </head> <body> <h1>jQuery form selector example</h1> <h2>Message = <label id="msg"></label></h2> <form name="testing" action="#"> <div> TextBox : <input type="textbox" value="This is message from textbox"/> </div> <div> Password : <input type="password" value="This is message from password"/> </div> <div> TextArea : <textarea>This is message from textarea</textarea> </div> <div> Radio : <input name="sex" type="radio" value="Male" checked>Male</input> <input name="sex" type="radio" value="Female">Female</input> </div> <div> CheckBox : <input type="checkbox" name="checkme">Check Me</input> </div> <div> File : <input type="file"></input> </div> <div> Hidden : <input type="hidden" value="This is message from hidden"/> </div> <div> Country : <select id="country"> <option value="China">China</option> <option value="United State">United State</option> </select> </div> <div> <input type="submit"></input> <input type="reset"></input> </div> </form> <button id="text">input:text</button> <button id="password">input:password</button> <button id="textarea">textarea</button> <button id="radio">input:radio</button> <button id="checkbox">input:checkbox</button> <button id="file">input:file</button> <button id="hidden">input:hidden</button> <button id="select">select</button> <button id="submit">input:submit</button> <button id="reset">input:reset</button> <script type="text/javascript"> $("#text, #password, #hidden, #textarea, #file, #submit, #reset").click(function () { var str = $(this).text(); $('input, textarea, select').css("background", "#ffffff"); $(str).css("background", "#ff0000"); $('#msg').html($(str).val()) }); $("#radio").click(function () { $('input, textarea, select').css("background", "#ffffff"); $('#msg').html($('input:radio[name=sex]:checked').val()); }); $("#checkbox").click(function () { var str = $(this).text(); $('input, textarea, select').css("background", "#ffffff"); if($('input:checkbox[name=checkme]').is(':checked')){ $('#msg').html("Checkbox is checked"); }else{ $('#msg').html("Checkbox is uncheck"); } }); $("#select").click(function () { $('input, textarea, select').css("background", "#ffffff"); $('#msg').html($('#country').val()); }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-form-selector.html[デモを試してください]