このページの本文へ

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

2009年09月02日 15時30分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

■チェックボックスを選択する:checkbox

 :checkboxは、type属性の値が「checkbox」のinput要素(チェックボックス)だけを選択できるフィルターです。

 次のサンプルは、button要素がクリックされると、すべてのチェックボックスのchecked属性の値を「checked」に変更してチェックを入れます。

サンプル14(スクリプト部分)


$(function(){
    $("button").click(function(){
        $(":checkbox").attr("checked","checked")
    })
}) 

サンプル14((X)HTML部分)


スキル:
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
<p><button>すべてにチェックを付ける</button></p>


サンプル14(実行結果)

サンプル14

サンプル14の実行画面。「すべてにチェックを入れる」と書かれたボタンをクリックすると、すべてのチェックボックスにチェックが入る


■送信ボタンを選択する:submit

 :submitは、type属性の値が「submit」または「images」のinput要素(送信ボタン)を選択するフィルターです。

 次のサンプルでは、送信ボタンにマウスが重なったときに、「<p>入力した内容をサーバーに送信します</p>」という(X)HTMLを追加し、送信ボタンからマウスが外れるとp要素を削除します。

サンプル15(スクリプト部分)


$(function(){
    $(":submit").mouseover(function(){
        $(this).after("<p>入力した内容をサーバーに送信します</p>")
    }).mouseout(function(){
        $("p").remove()
    })
})

サンプル15((X)HTML部分)


<dl>
    <dt>お名前<em>(必須)</em></dt>
    <dd><input type="text" name="name" /></dd>
    <dt>コメント</dt>
    <dd>
        <textarea name="comment"></textarea>
    </dd>
    <dd><input type="submit" value="送信" /></dd>
</dl>


サンプル15(実行結果)

サンプル15

サンプル06の実行画面。送信ボタンにマウスカーソルを重ねると「入力した内容をサーバーに送信します」と表示される


■イメージボタンを選択する:image

 :imageは、type属性の値が「image」のinput要素(イメージボタン)だけを選択するフィルターです。

 次のサンプルでは、イメージボタンにマウスカーソルが重なるとsrc属性を「button_on.jpg」に変更し、ボタンから外れると「button.jpg」に戻します。

サンプル16(スクリプト部分)


$(function(){
    $(":image").mouseover(function(){
        $(this).attr("src","button_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","button.jpg")
    })
}) 

サンプル16((X)HTML部分)


<dl>
    <dt>お名前<em>(必須)</em></dt>
    <dd><input type="text" name="name" /></dd>
    <dt>コメント</dt>
    <dd>
        <textarea name="comment"></textarea>
    </dd>
    <dd><input type="image" src="button.jpg" alt="送信" /></dd>
</dl>

サンプル16(実行結果)

サンプル16

サンプル16の実行画面。マウスオーバーでイメージボタンの画像が切り替わる

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く