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

jQuery フォームデザイン

今日も早く帰ってこれたぞと。
昨日の続きで、「:checked」フィルタ。
当然思いつくべきことを忘れていた。。

さんざん、入力タグ系のフィルタって使うケースあんのか？と言っていましたが、
子セレクターとして使えればそれなりの需要はありそうだ。
というわけで試してみた。

<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 value = $(":checked").val();
	  //alert(value);
          //上の代わりに↓のコメントアウトされているコードを有効にする。
          //そうすると、radioボタンだけじゃなくcheckboxの方で
          //選択されているものまでとってくる感じ。
          var values = "";
          $(":checked").each(function() {
            values += $(this).val() + "\n";
          })
          alert(values);
        });
        //チェックボックスのサンプル
        //セレクターをイジってみた。
        //子セレクターとして使えるかどうかチェック。
        //思った通り限定できるみたい。こういう使い方すればいいのか〜。
        $(":checkbox").click(function() {
          var values = "";
          $("#hobby :checked").each(function() {
            values += $(this).val() + "\n";
          })
          alert(values);
	});
      })
    </script>
  </head>
  <body>
    <form name="sex" id="sex">
      <input type="radio" name="sex" value="man" />
      <span>男性</span><br/>
      <input type="radio" name="sex" value="woman" />
      <span>女性</span><br/>
    </form>
    <br/>
    <form name="hobby" id="hobby">
      <input type="checkbox" name="hobby" value="football" />
      <span>サッカー</span><br/>
      <input type="checkbox" name="hobby" value="tennis" />
      <span>テニス</span><br/>
      <input type="checkbox" name="hobby" value="2ch" />
      <span>２ちゃん</span><br/>
    </form>
  </body>
</html>

こう使えるなら結構便利かもね♪