jQueryでHTMLフォームを操作したいときがあると思います。フォームの値を取得したり、属性値を変更したり、jQueryUIやCSSなどでユーザーインターフェースを高めたいときなどなど。それらをまとめていきたいと思います。formの中に入れれる要素としてテキストタイプやラジオタイプのinputや、textarea、selectなど色々なタグがあるので、一つのページにまとめたら楽かなと思い今回の記事を書くことにしました。
input[type=”text”]：テキストタイプのインプット
通常のテキストを入力するテキストタイプのinputです。他にも「type=”password”」や「type=”email”」、「type=”hidden”」も同じような形式になります。
デモ1
HTMLの例
分かりやすいようにIDを振っています。
|
1 |
<input id="inputText" type="text" value="" /> |
valueを取得する
取得するためには「val()」を利用します。これはtextareaでも取得できます。
|
1 |
$('#inputText').val(); |
valueを変更する
「val()」の引数に文字列を指定することで、その文字列を当てはめることができます。
|
1 2 |
Str = 'この文字が入ります'; $('#inputText').val('Str'); |
valueを削除
単純に「val()」に渡す引数を「”」にしてinputのvalueを削除します。
|
1 |
$('#inputText').val(''); |
input[type=”radio”]：ラジオタイプのインプット
ラジオボタンではチェックの対象が複数あるため、ターゲットを絞り方に困ることがあるかもしれませんが、「$(‘input[name=”test”]’)」のようにname属性で指定することで、同じラジオをターゲットにすることができます。
デモ2
HTMLの例
分かりやすいようにIDを振っています。
|
1 2 |
<label for="Target1"><input id="Target1" name="test" type="radio" value="右" />右</label> <label for="Target2"><input id="Target2" name="test" type="radio" value="左" />左</label> |
チェックされているものを取得する
ラジオボタンでチェックをされているものを取得する方法です。これもターゲットの絞り方を工夫して「val()」で指定できますが、何もチェックされていない場合は「undefined」が返されるので、条件分岐を追加しています。
|
1 2 3 4 |
$val = $('input[name="test"]:checked').val(); if ($val === void 0) { $val = 'チェックがありません。' } |
チェックする
「attr()」ではうまく引き渡せないことがあるので「prop(‘checked’, true)」を使っています。またチェックを付けるだけで動作してはいますが、一応該当のラジオボタンと同じname属性を持つラジオボタンのチェックを外しています。
|
1 2 |
$('#Target1').prop('checked', true); $('.input[name="test"]').not('#Target1').prop('checked', false); |
チェックを外す
チェックを外すときは前の項目に書いてあるように「prop(‘checked’, false)」を利用します。
|
1 2 |
$('#Target1').prop('checked', false); //#Target1のチェックを外す $('input[name="test"]').prop('checked', false); //nameがtestのラジオボタンのチェックをすべて外す |
input[type=”checkbox”]：チェックボックスタイプのインプット
チェックボックスは複数チェックすることができるため、取得には一工夫が必要です。チェックの削除は、ラジオボタンよりも簡単かもしれません。
デモ3
HTMLの例
分かりやすいようにIDを振っています。
|
1 2 3 |
<label for="Target1"><input id="Target1" type="checkbox" name="test" value="HTML">HTML</label> <label for="Target2"><input id="Target2" type="checkbox" name="test" value="CSS">CSS</label> <label for="Target3"><input id="Target3" type="checkbox" name="test" value="jQuery">jQuery</label> |
チェックされたvalを取得する
チェックボックスは複数選択されている場合があるため、nameで指定したinputをeach()で回しています。この例では変数「val」に追加していますが、配列にpush()で追加した方がデータとしては扱いやすいかもしれません。以下の例では、全てチェックされている場合、textに”「HTML」、「CSS」、「jQuery」がチェックされています。”と入ります。また、何も選択されていない場合もあるので、prop(‘checked’)で判別してチェックがあるものだけテキストを変数valにvalueを追加、テキストが追加されていなければ(変数valに何も入っていなければ)チェックされていないということになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var text = '', val = ''; $('input[name="test"]').each(function(i){ if($(this).prop('checked')){ if(i != 0) { val += '、'; } val += '「' + $(this).val() + '」'; text = val + 'がチェックされています。'; } }); if(val == ''){ text = 'チェックされていません。'; } |
チェックする
チェックボックスのチェックはラジオボタンと同じように「prop(‘checked’,true)」を使います。
|
1 2 |
$('#Target1').prop('checked', true); //#Target1をチェック $('input[name="test"]').prop('checked', true); //nameがtestのチェックボックスをチェック |
チェックを外す
チェックボックスのチェックを外す場合においてもpropの第二引数を「false」にしてあげれば外れます。
|
1 2 |
$('#Target1').prop('checked', false); //#Target1のチェック外す $('input[name="test"]').prop('checked', false); //nameがtestのチェックボックスのチェックを外す |
コメントを残す