人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML のフォーム入力制限に関する質問です。
チェックボックスのうち2個にチェックをつけないといけないように制限をかけたいのです。javascript のサンプルがあるページお願いします。

●質問者: kaiketsu
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript チェックボックス 入力
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● siachan
●24ポイント

端折ってる部分がありますが、こんな感じでしょうか。

<html>

<head>

<title>checkbox</title>

<script type=”text/javascript”>

<!--

function boxcheck() {

var num = 0;

var i;

var d=document.checktest.check;

for(i=0; i<d.length; i++) {

if(d[i].checked) {

num++;

}

}

if(num != 2) {

alert(”二つチェックしてください”);

return false;

}

//alert(”二つはいりまーす”);

return true;

}

// -->

</script>

</head>

<body>

<form name=”checktest” onsubmit=”return boxcheck();”>

<input type=”checkbox” name=”check” value=”1”>選択肢1

<input type=”checkbox” name=”check” value=”2”>選択肢2

<input type=”checkbox” name=”check” value=”3”>選択肢3

<input type=”checkbox” name=”check” value=”4”>選択肢4

<input type=”checkbox” name=”check” value=”5”>選択肢5

<input type=”submit”>

</form>

</body>

</html>

◎質問者からの返答

ありがとうございます。


2 ● sadcns
●23ポイント

http://www015.upp.so-net.ne.jp/heyjude/script_sample_Form_05.htm...

こんにちは。

ここにばっちり書いてあります。

◎質問者からの返答

なるほど


3 ● english
●23ポイント

もしかしたら、はてなのシステムで半角で入力されるべきところが全角に変換されているかもしれないのですが(その場合は、適宜変えてください。)、下記コードで動くはずです。テスト済みで、コピー&ペーストしてみました。

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>

<title>test</title>

<script language=”Javascript”>

<!--

function sendData(){

myCnt = 0;

for(var i=0;i<document.myForm.q1.length;i++){

if(document.myForm.q1[i].checked){

myCnt++;

}

}

if(myCnt<=1){

alert(”2個以上、選択してください。”);

return false;

} else {

document.myForm.submit();

}

}

//-->

</script>

</head>

<body bgcolor=#FFFFFF>

<form name=myForm action=”***” method=”get” onSubmit=”sendData();return false;”>

<input type=checkbox name=q1 value=”1”>  回答1

<input type=checkbox name=q1 value=”2”>  回答2

<input type=checkbox name=q1 value=”3”>  回答3

<input type=checkbox name=q1 value=”4”>  回答4

<input type=submit value=”送信する”> <input type=reset value=”リセット”>

</form>

</body>

</html>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ