チェックボックス選択で(3つ)まで
<input type="checkbox" name="fhobby" value="animation">アニメ
<input type="checkbox" name="fhobby" value="game">ゲーム
<input type="checkbox" name="fhobby" value="reading">読書
<input type="checkbox" name="fhobby" value="amusement">娯楽
<input type="checkbox" name="fhobby" value="comics">漫画
<input type="checkbox" name="fhobby" value="jogging">ジョギング<br>
<input type="checkbox" name="fhobby" value="cycling">サイクリング
<input type="checkbox" name="fhobby" value="shopping">ショッピング
<input type="checkbox" name="fhobby" value="picture">絵画
<input type="checkbox" name="fhobby" value="travel">旅行
<input type="checkbox" name="fhobby" value="others">その他
No.3ベストアンサー
- 回答日時:
こんな感じでもよいですね
<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="checkbox" && t.name=="fhobby"){
var f=t.form;
var count=0;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].name=="fhobby" &&f[i].checked) count++;
if(count>3){
alert("over");
if(e.preventDefault)e.preventDefault(); //基本
else e.returnValue = false; //IE
exit;
}
}
}
}
</script>
<form>
<p>
<input type="checkbox" name="fhobby" value="animation">アニメ
<input type="checkbox" name="fhobby" value="game">ゲーム
<input type="checkbox" name="fhobby" value="reading">読書
<input type="checkbox" name="fhobby" value="amusement">娯楽
<input type="checkbox" name="fhobby" value="comics">漫画
<input type="checkbox" name="fhobby" value="jogging">ジョギング<br>
<input type="checkbox" name="fhobby" value="cycling">サイクリング
<input type="checkbox" name="fhobby" value="shopping">ショッピング
<input type="checkbox" name="fhobby" value="picture">絵画
<input type="checkbox" name="fhobby" value="travel">旅行
<input type="checkbox" name="fhobby" value="others">その他
</P.
</form>
No.1
- 回答日時:
javascriptでコントロールするのが無難です。
もちろんjavascriptオフに備えサーバー側でもチェックする必要
がありますが。
以下、かなり手抜きサンプル
------
<input onclick="checkbox_check();" type="checkbox" name="fhobby" value="animation">
------
<script type="text/javascript">
function checkbox_check(){
var count=0;
var chk = document.getElementsByName('fhobby');
for(var i=0;i<chk.length;i++) {
if (chk[i].checked == true)
count++;
}
if(count > 3){
alert("3つ以上は選べません");
}
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- PHP PHPでユーザー情報を入力して簡易ログイン機能をつくってみたのですが 1 2023/05/29 08:51
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでこの画像を表示したいで...
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
HTMLの CSSのファイルというの...
-
スマホ(android)のタッチパネ...
-
HTMLを正しく表示させるには
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
英字と日本語が並んだhtmlの自...
-
スマホでHTMLファイルを開いて...
-
HTMLで特定の文字だけ色を変え...
-
iPhoneで HTMLファイルを閲覧
-
サイトにコンテンツを並べる際...
-
webデザインの勉強で、HTML/CSS...
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
INPUT TYPE
-
select値をhiddenのvalueに渡し...
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
リストボックス(multipleなsel...
-
ラジオボタンを選択済みにする...
-
OPTIONタグにループは使えない...
-
検索窓をクリックすると文字が...
-
NNでうまく動きません
-
チェックボックス選択で(3つ)...
-
フォームで絞込み検索機能を持...
-
メールフォームのプルダウンメ...
-
HTML プルダウンメニューの選択...
-
チェックボックスの余白を指定...
-
<select>タグの幅設定
-
フォームよりCGIへ複数の値をPO...
-
HP上の選択ボタンの選択肢リス...
-
プルダウンメニューにテキスト...
おすすめ情報