jQuery 基本その3 フォームの内容入力について

検索フォームについて書こうと思いましたが
思いの他入力内容について量が多くなったので
別途書き記します。

.val()

「val()」は、HTMLタグ内に記述されている
value属性を取得したり変更することができるメソッドになります。

html

<form>
    <input type="text" value="入力">

    <input type="checkbox" value="sono1">：その1
    <input type="checkbox" value="sono2" checked>：その2
    <input type="checkbox" value="sono3">：その3
</form>

上記の入力ボックスやチェックボックスのように
value属性が記述されていれば「val()」メソッドで取得・変更することが可能です。

より基本的な流れを説明すると

html

<button id="btn" value="a">ボタン</button>
<!--これでhtmlでidがbtnとvalueを設定-->

jQuery

var btn = $('#btn').val(); //変数にidがbtnのvalueを代入

console.log( btn ); //変数btnを出力

コンソール

a　
# valueの値が出力されました。

上書き・設定

またはjQueryを下記のようにすると

jQuery

var btn = $('#btn').val('b'); //変数にidがbtnのvalueを代入

console.log( btn ); //変数btnを出力

bが出力されます。
これはhtmlにvalueが設定されてなくても一緒です。
コードの順番から行ってjQueryのval()の
引数の値にvalueが設定または上書きされると考えてください。

select要素

select要素というのがありますが
ほぼ仕様は一緒でselectと設定すれば値が入力されます。

select

<select multiple>
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>
<button>ボタン</button>

jQuery

$('button').click(function() {
    var value = $('select').val(); //ここで設定します。

    console.log(value);
})

コンソール

1,2
# aとbを選択したら出力されます。

checkbox要素

checkbox要素の場合はthisで設定されます。
それを含めてポイントは三つ
①input:checked要素で設定
②each構文でtype="checkbox"でチェックされたのを設定
③thisで現在のチェック内容を拾ってきます。

html

<input type="checkbox" value="1">サンプル１
<input type="checkbox" value="2">サンプル２
<input type="checkbox" value="3">サンプル３
<button>ボタン</button>

jQuery

$('button').click(function() {

    $('input:checked').each(function() { //①input:checked要素で設定
                                         //②each構文でtype="checkbox"でチェックされたのを設定
        var r = $(this).val(); //③thisで現在のチェック内容を拾ってきます。

        console.log(r);
    })

})

radio要素

radio要素は「select / checkbox」と違い、ユーザーが選択できるのは1つだけでなのでシンプルです。
②each構文でtype="checkbox"でチェックされたのを設定がないので短くなります。

html

<input type="radio" name="sample" value="1">サンプル１
<input type="radio" name="sample" value="2">サンプル２
<input type="radio" name="sample" value="3">サンプル３
<button>ボタン</button>

jQuery

$('button').click(function() {
    // ②each構文でtype="checkbox"でチェックされたのを設定がありません。
    var result = $('input:checked').val();

    console.log(result);

})

textbox要素

textbox要素は、ユーザーが何らかの文字列を入力することができるボックスになります。
value値を設定することで、あらかじめボックス内に任意の文字列を入力した状態にできます。

html

<input type="text" value="サンプルテキスト">

jQuery

var value = $('input').val();

console.log(value);

コンソール

サンプルテキスト