自動車保険はネットで安くなる!? 通販型自動車保険に変えるだけで年間20,000円も違う!! 今すぐ5分でサクッと無料で見積もってみる

アンケートフォームに使える数制限付きのチェックボックスをjavascriptで実装する

    

タグ: 

アンケートフォームに最適な数制限付きのチェックボックスをjavascriptで実装する

前回に続きCGIフォーム第二弾です。今回はチェックボックスに「○個まで選択可能」という風に数制限をjavascriptで実装します。アンケートフォームなどでよく見るアレです。結構簡単に実装できるので是非とも覚えておきたいテクニックです。

要件定義

  1. 指定の数制限を超えるとアラートで注意文を表示
  2. 指定の数制限を超えたチェックは適応させない
  3. <label>タグを設定してユーザービリティも忘れない!

HTMLコーディング

まずはHTMLです。用途に応じて好きなだけチェックボックスを設置しましょう。ちなみにデモは私のタイプの女性についてです。

formにnameが必要ですよ。chもチェックボックスの数だけ必要です。labelで文字をクリックしても選択されるようにしていますね。

javascriptで条件定義

設置したチェックボックスの数だけ配列を作成しています。そしてその下にチェックできる数を指定。formにつけたnameでどの部分かを指定していますよ。そしてalert(アラート)表示させるテキストと先ほど指定した数字を表示させていますね。

こうみると意外とシンプルなソースコードで実装が出来てしまいますね。この手のフォームはアンケートで結構多様するのでこれは覚えておくと便利かもしれませんね。
参考:http://javascript.eweb-design.com/1213_cbn.html

デモを見る

この記事にいいね!

こんな記事も読まれています

この記事へのコメント

メールアドレスが公開されることはありません。

no image
gotop