フォームデザイン（フォーム部品選択フィルタ「:radio」「:checkbox」）

jQuery フォームデザイン

疲れが溜まっております。。
んが、今日は少し早く帰ってきたのでエントリ追加。


radioとかcheckboxってinputタグ中にinnerHTMLとかinnerTextとかで文字列を入力しても意味無いのね。
中に文字を設定したらその文字をクリックしても切り替えが発生すればいいのに。
以下のサンプルは選択した方のテキスト（span）の文字色を赤にする感じ。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        //ラジオボタンのサンプル
        $(":radio").click(function() {
          var id = "#" + $(this).attr("id") + "_text";
	  $(id).css("color", "red");
	}).blur(function() {
          var id = "#" + $(this).attr("id") + "_text";
	  $(id).css("color", "");
        });
        //チェックボックスのサンプル
        $(":check").click(function() {
          var id = "#" + $(this).attr("id") + "_hobby";
          if ($(this).attr("checked"))
          {
            $(id).css("color", "red");
          }
          else
          {
            $(id).css("color", "");
          }
	});
      })
    </script>
  </head>
  <body>
    <input type="radio" name="sex" id="man" /><span id="man_text">男性</span><br/>
    <input type="radio" name="sex" id="woman" /><span id="woman_text">女性</span><br/>
    <br/>
    <input type="checkbox" name="hobby" id="football" />
    <span id="football_hobby">サッカー</span><br/>
    <input type="checkbox" name="hobby" id="tennis" />
    <span id="tennis_hobby">テニス</span><br/>
    <input type="checkbox" name="hobby" id="2ch" />
    <span id="2ch_hobby">２ちゃん</span><br/>
  </body>
</html>

てか、マジでこの入力フォーム関連のタグって使い道あんのか？？