チェックボックス選択で（3つ）まで

質問

チェックボックス選択で（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

yambejp · ベストアンサー

こんな感じでもよいですね

<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.2

otaku37564

アンケートかなにかですか？
再質問してください。

回答No.1

yyr446

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>