jQueryによるINPUT要素の操作
ボタンのテスト
ここではボタン操作に対するイベントを確認している。
ボタンはinput要素のタイプの一つとして作成される。
ボタンが押された時のイベントはonclick属性で定義してもよいが、ここではそれを使わず、jQueryのハンドラで処理している。
|
1 |
<input type="button" id="btn_button" value="押してください" /><br /> |
ボタンが押下されたときのイベントは、(そのボタンが動的に後から追加されたものでなければ)click()で捕捉される。
|
1 2 |
$("#btn_button").click -> alert("ボタンを押しましたね。") |
テキストボックスのテスト
入力：
出力：
ここではテキストボックスの内容の取得や書き込みについて確認している。
|
1 2 3 |
入力：<input type="text" id="txt_input" /><br /> 出力：<input type="text" id="txt_output" /><br /> <input type="button" id="btn_text" value="コピー" /> |
テキストボックスの内容の取得や設定はval()メソッドで行う。
|
1 2 3 |
$("#btn_text").click -> txt = $("#txt_input").val() $("#txt_output").val(txt) |
チェックボックスのテスト
チェックボックスの確認。
|
1 2 3 4 |
<p> <label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label> </p> <input type="button" id="btn_checkbox" value="決定"> |
チェックボックスのチェック状態の取得には、prop()メソッドを用いる。
|
1 2 3 4 5 |
$("#btn_checkbox").click -> if $("#chk_accept").prop("checked") alert("あなたは同意しました。") else alert("あなたは同意しませんでした。") |
ラジオボタンのテスト
通知エリア
ラジオボタンの動作を確認している。ここでは選択状態が変わるごとにイベントが発生して、通知エリアの表示が変わる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="radio_notation">通知エリア</div> <p> <label><input type="radio" name="number" value="壱" onChange="onChangeNumber()" />One</label> <label><input type="radio" name="number" value="弐" onChange="onChangeNumber()"checked="checked" />Two</label> <label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label> </p> <p> <label><input type="radio" name="animal" id="dog" value="犬" />Dog</label> <label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label> <label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label> </p> |
上段はブラウザ側のonchange属性でイベントハンドラを指定し、下段はjQueryのハンドラを使っている。
|
1 2 3 4 5 6 7 8 9 |
# ブラウザ側で定義したイベントハンドラ window.onChangeNumber = -> number = $("input[name=number]:checked").val() $("#radio_notation").html("#{number}番が選択されました") # jQuery側で準備されたイベントハンドラ $("input[name=animal]").change -> animal = $("input[name=animal]:checked").val() $("#radio_notation").html("#{animal}を連れていく") |
セレクトボックスのテスト
通知エリア
セレクトボックス(ドロップダウンリスト)の例。
- ボックス内の選択肢を選ぶたびに通知エリアの表示が変わる
- “LONDONへ”ボタンを押すと、ロンドンが選択された状態になる。
- “追加”ボタンで選択肢に”パリ”が追加され、”削除”ボタンで削除される
|
1 2 3 4 5 6 7 8 9 10 |
<div id="select_notation">通知エリア</div> <select id="capital"> <option value="Tokyo">東京</option> <option value="Washington D.C." selected>ワシントンDC</option> <option value="London">ロンドン</option> </select><br /> <input type="button" id="btn_select" value="Londonへ"><br /> <input type="button" id="btn_select_append" value="追加"><br /> <input type="button" id="btn_select_delete" value="削除"> |
セレクトボックスの状態変化のイベントは、change()メソッドで捕捉される。
“追加”と”削除”のボタンはprop()メソッドを使って選択状態をトグルさせているが、ページのテーマ／デザインによっては明確にはわからないことがある。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
appended = no capital = $("#capital").val() $("#select_notation").html("首都は#{capital}が選択されています") $("#capital").change -> capital = $(this).val() capitalText = $("#capital option:selected").text() $("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました") $("#btn_select").click -> $("#capital").val("London") $("#btn_select_append").click -> $("#capital").append('<option value="Paris">パリ</option>') $("#btn_select_append").prop("disabled", true) $("#btn_select_delete").prop("disabled", false) $("#btn_select_delete").click -> $("#capital option[value='Paris']").remove() $("#btn_select_append").prop("disabled", false) $("#btn_select_delete").prop("disabled", true) |