チェックボックス選択で(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ランキング
-
ラジオボタンが両方とも選択で...
-
FORMのselectの選択肢を最初か...
-
「value」に2つの値をセットす...
-
NNでうまく動きません
-
select値をhiddenのvalueに渡し...
-
OPTIONタグにループは使えない...
-
チェックボックスとセレクトボ...
-
INPUT TYPE
-
チェックボックス選択で(3つ)...
-
フォームで絞込み検索機能を持...
-
Select Case について教えてく...
-
ラジオボタンを選択済みにする...
-
htmlで on off 未選択 を表現す...
-
wordの数式について 定積分を書...
-
perlで重複データを集計
-
UTF-8で文字化けしないようにす...
-
チェックボックスでのor検索
-
「利用規約の同意」チェックボ...
-
OBJECTタグで、PARAMを使用する...
-
表示を一覧表形式にしたいので...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
INPUT TYPE
-
select値をhiddenのvalueに渡し...
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
ラジオボタンを選択済みにする...
-
ある条件での必須入力について
-
チェックボックスグループの一...
-
<select>タグの幅設定
-
プルダウンメニューでValue値を...
-
htmlでセルの値を取得して計算...
-
プルダウンメニューにテキスト...
-
リストボックス(multipleなsel...
-
iframeごとに戻るボタンを
-
PHPで検索ボタンを押さずに検索...
-
HTML プルダウンメニューの選択...
-
チェックボックス選択で(3つ)...
-
メールフォームのプルダウンメ...
-
検索窓をクリックすると文字が...
おすすめ情報