jQueryによるフォームのデザインの基礎（後編） (2/5)

• 
• ツイートする

■パスワード入力フォーム部品を選択する:password

　:passwordは、type属性の値が「password」のinput要素（パスワード入力フォーム）だけを選択するフィルターです。

　次のサンプルでは、パスワード入力フォームがフォーカスされると、input要素の後ろに「<p>パスワードは6文字以上で入力してください</p>」という(X)HTMLを追加します。フォーカスが外れると、p要素を取り除きます。

▼サンプル11（スクリプト部分）

$(function(){
    $(":pass").focus(function(){
        $(this).after("<p>パスワードは6文字以上で入力してください</p>");
    }).blur(function(){
        $("p").remove();
    })
})

▼サンプル11（(X)HTML部分）

パスワード：<input type="password" name="pass" />

▼サンプル11（実行結果）

サンプル03の実行画面。パスワード入力フォームをフォーカスすると、「パスワードは6文字以上で入力してください」と表示される

■ラジオボタンを選択する:radio

　:radioは、type属性の値が「radio」に設定されているinput要素（ラジオボタン）だけを選択するフィルターです。

　次のサンプルでは、ラジオボタンがクリックされると、ラジオボタンと対になるlabel要素（ラジオボタンのid属性と同じ値をfor属性に持つlabel要素）を太字に変更します。また、label要素がクリックされた場合も、クリックされたlabel要素を太字にします。

　なお、以前にチェックを入れたラジオボタンが太字のままにならないように、クリックイベントの処理の最初に $("label").css("font-weight","") として、すべてのlabel要素のfont-weightプロパティをいったん初期値に戻しています。

▼サンプル12（スクリプト部分）

$(function(){
    $(":radio").click(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
    $("label").click(function(){
        $("label").css("font-weight","")
        $(this).css("font-weight","bold")
    })
})

▼サンプル12（(X)HTML部分）

性別:
<input type="radio" name="gender" value="男性" id="gender_man" />
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性" id="gender_woman" />
<label for="gender_woman">女性</label>

▼サンプル12（実行結果）

サンプル12の実行画面。ラジオボタンを選択すると対応するラベルを太字にする

$(function(){
    $(":radio").change(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
})