プロが教える店舗＆オフィスのセキュリティ対策術

ラジオボタンの選択によってチェックボックスのチェックできる個数を制限し

解決済

  • 質問者：koji60ja
  • 質問日時：
  • 回答数：4件

ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。

他の方の質問を見たのですがマッチする質問がなかったのでご質問させていただきます。

現在申し込みフォームを作成しているのですが、要件としては、
ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。
と思っています。javascriptで実現できると思うのですがなかなかできずに困っております。

＜ラジオボタン＞
○りんご　○みかん　○めろん　○すいか

＜チェックボックス＞
□青森産　□愛媛産　□千葉産　□神奈川産


りんごを選んだ人は、チェックボックスで１つしか選択できないようにしたい。
みかんを選んだ人は、チェックボックスで２つしか選択できないようにしたい。
めろんを選んだ人は、チェックボックスで３つしか選択できないようにしたい。
すいかを選んだ人は、チェックボックスで４つ選択できるようにしたい。

可能であれば制限を超えた場合はアラートを上げたいと思います。
２つまでしか選べませんというように。

大変申し訳ありませんが、参考になるページやソースなどを教えていただければと
思います。よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： steel_gray
  • 回答日時：

使う要素を変えればスクリプトの中身も多少違ってきます。


selectにした場合のサンプルは以下

<script type="text/javascript">
function sample(Submit){
var kosuu = {
'りんご':1,
'みかん':2,
};

var count = 0;
var fld3 = document.getElementsByName('fld3[]');
for(i=0;fld3[i];i++) if(fld3[i].checked) count++;
var fld1 = document.getElementsByName('fld1')[0];

if(count > kosuu[fld1.value] ) {
alert('選択産地が多すぎです。'+kosuu[fld1.value]+'個選んでください。');
return false;
} else if(Submit && count < kosuu[fld1.value]){
alert('選択産地が足りません。'+kosuu[fld1.value]+'個選んでください。');
return false;
}
return true;
}
</script>
</head>
<body>

<form onsubmit="return sample(this)">
<p><select name="fld1" onchange="sample()" >
<option value="りんご">りんご</option>
<option value="みかん">みかん</option>
</select>
</p>
<p>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">青森産</label>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">愛媛産</label>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">千葉産</label>
</p>
<p><input type="submit"></p>
</form>

この回答への補足

steel_gray様

本当にお世話になりました。
すべてうまく動くことに成功しました。初めてjavascriptなるものにチャレンジしてみましたがお陰さまでうまく同一フォームで、２つの項目チェックを動かすことができました。
以下ソースです。文法的に合っているか微妙？？？ですが、formのonsubmitを&&でつなげてみました。

<form onsubmit="return (keisan(true)&&dai2shouhin(this))">

省略（教えていただいたセレクトボックスの処理とラジオボタンの処理を書きました）

</form>

javascriptは、教えていただいたものを２つ以下のような感じで書きました。

<!-- 第一商品個数チェック -->
<script type="text/javascript">
function keisan(Submit){
var kosuu = {
'みかん':1,
'りんご':2,
};

var count = 0;
var fld3 = document.getElementsByName('fld3[]');
for(i=0;fld3[i];i++) if(fld3[i].checked) count++;
var fld1 = document.getElementsByName('fld1');
for(i=0;fld1[i];i++) {
if(fld1[i].checked) {
if(count > kosuu[fld1[i].value] ) {
alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。');
return false;
} else if(Submit && count < kosuu[fld1[i].value]){
alert('選択産地が足りません。'+kosuu[fld1[i].value]+'個選んでください。');
return false;
}
break;
}
}
return true;
}
</script>
<!-- 第一商品個数チェック終了-->

<!-- 第二商品個数チェック -->
<script type="text/javascript">
function dai2shouhin(Submit){
var kosuu = {
'みかん':1,
'りんご':2,
};

var count = 0;
var fld6 = document.getElementsByName('fld6[]');
for(i=0;fld6[i];i++) if(fld6[i].checked) count++;
var fld5 = document.getElementsByName('fld5')[0];

if(count > kosuu[fld5.value] ) {
alert('選択産地が多すぎです。'+kosuu[fld5.value]+'個選んでください。');
return false;
} else if(Submit && count < kosuu[fld5.value]){
alert('選択産地が足りません。'+kosuu[fld5.value]+'個選んでください。');
return false;
}
return true;
}
</script>
<!-- 第二商品個数チェック終了 -->

心より感謝申し上げます。
本当にありがとうございました。

また、この場を借りて、zeff様にも御礼申し上げます。
かなり参考になりました。ありがとうございます。

補足日時：2010/04/22 16:14
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

朝早くから本当にありがとうございました。
あと少しで完成しそうです。セレクトボックスの方法もご教授いただき感謝致します。
今は、同じフォーム内で教えていただいた
１．ラジオボタンの選択によってチェックボックスの個数制限→OK
２．セレクトボックスの選択によってチェックボックスの個数制限→NG
といった状況です。別々のフォームにすればもちろん動きます。
朝からとほほなどを参考にして勉強しております。明日、質問を締め切りさせて
いただきます。同じフォームで動かすのは素人には難しいです（泣）

通報する
お礼日時：2010/04/22 11:14

No.3ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

#1です。

nameを合わせてみました。
ついでに、多すぎるチェックしかしてませんでしたが、少ない場合のチェックも追加しました。（質問の要件を見落としてました）
送信する時だけ少ないケースもチェック。
送信ボタン契機でアラートを出した場合はフォームが送信されないようにしています。

<script type="text/javascript">
function sample(Submit){
var kosuu = {
'りんご':1,
'みかん':2,
};

var count = 0;
var fld3 = document.getElementsByName('fld3[]');
for(i=0;fld3[i];i++) if(fld3[i].checked) count++;
var fld1 = document.getElementsByName('fld1');
for(i=0;fld1[i];i++) {
if(fld1[i].checked) {
if(count > kosuu[fld1[i].value] ) {
alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。');
return false;
} else if(Submit && count < kosuu[fld1[i].value]){
alert('選択産地が足りません。'+kosuu[fld1[i].value]+'個選んでください。');
return false;
}
break;
}
}
return true;
}
</script>
</head>
<body>

<form onsubmit="return sample(true)">
<p>
<label><input type="radio" name="fld1" value="りんご" onclick="sample()">りんご</label>
<label><input type="radio" name="fld1" value="みかん" onclick="sample()">みかん</label>
</p>
<p>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">青森産</label>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">愛媛産</label>
<label><input type="checkbox" name="fld3[]" value="" onclick="sample()">千葉産</label>
</p>
<p><input type="submit"></p>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

#1様

今、気付きました。#2の方と間違えておりました。#2の方も本当にありがとうございます。
お二人ともご回答してくださっていたようで早とちりしてしまいました。
ベストアンサーに関しては、再度ご検討させていただきます。
なお、大変素晴らしいソースでびっくりしました。もっともっと勉強する必要があると思います。これで何ら問題なく動いております。足りない場合のアラートすごく気に入りました。感謝しております。

最後に、１つだけ疑問があるのですが、オプション（プルダウンのときは）onclickでは
なく、onChangeにして同じようにしているのですが、うまく動かない現象になっています。
お時間を使わせてしまうのは申し訳ないのですが、お時間のあるときで
結構ですので分かるようでしたら一言でも結構ですのでヒントをいただけると助かります。

通報する
お礼日時：2010/04/21 22:21

No.2

  • 回答者： zeff#1
  • 回答日時：

産地をチェックしてからフルーツをチェックしなおすと、


産地をチェックできる個数に不整合が生じるので、
フルーツチェックしたら必ず産地チェックをクリアするようにしました。

またフルーツをチェックしないで産地をチェックするとアラートしてクリア、
個数をオーバーするとアラートしてクリアします。
fld3[]についてはわかりません。
onsubmitがそもそもよくわからない；

参考：
http://www.tagindex.com/javascript/form/check5.h …

<script type="text/javascript">
<!--
var max = new Array(1,2,3,4);
var L,FL;
var i,cnt = 0;
function fldClr(){
L = document.form1.fld3.length;
for( i=0; i < L; i++){
document.form1.fld3[i].checked = false;
}
cnt = 0;
}
function check(){
var m,flag = 0;
FL = document.form1.fruit.length;
for( i=0; i < FL; i++){
if( document.form1.fruit[i].checked ){
flag = 1;
m = max[i];
break;
}
}
if( flag == 0 ){
alert("フルーツを選択して下さい。");
fldClr();
}else{
cnt++;
if ( cnt > m ){
alert( m + "つまでしか選べません。");
fldClr();
}else{
return true;
}
}

}
// -->
</script>

</head>
<body>
<form method="POST" action="example.cgi" name="form1" onsubmit="return check()">
<p>
<label><input type="radio" name="fruit" value="りんご" onclick="fldClr()">りんご</label>
<label><input type="radio" name="fruit" value="みかん" onclick="fldClr()">みかん</label>
<label><input type="radio" name="fruit" value="めろん" onclick="fldClr()">めろん</label>
<label><input type="radio" name="fruit" value="すいか" onclick="fldClr()">すいか</label>
</p>
<p>
<label><input type="checkbox" name="fld3" value="青森産" onclick="check()">青森産</label>
<label><input type="checkbox" name="fld3" value="愛媛産" onclick="check()">愛媛産</label>
<label><input type="checkbox" name="fld3" value="千葉産" onclick="check()">千葉産</label>
<label><input type="checkbox" name="fld3" value="神奈川産" onclick="check()">神奈川産</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

この回答への補足

今書いてくださったソースを試してみたところ、
同じ項目にチェックをするとアラートが上がってしまいました。
こちらの方ももう少し頑張ってみようと思います。
お忙しい中ありがとうございます。

補足日時：2010/04/21 20:08
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

何から何までありがとうございます。心より感謝しております。
まだ[]の謎が解けませんが頑張ってみようと思います。
今週いっぱい質問受け付けて[]が解決できなくてもベストアンサーにさせて
いただきます。お忙しい中ありがとうございました。

通報する
お礼日時：2010/04/21 19:33

No.1

  • 回答者： steel_gray
  • 回答日時：

以下、さんぷる



<script type="text/javascript">
function sample(){
var kosuu = {
'りんご':1,
'みかん':2,
};

var count = 0;
var sanchi = document.getElementsByName('sanchi');
for(i=0;sanchi[i];i++) if(sanchi[i].checked) count++;
var fruit = document.getElementsByName('fruit');
for(i=0;fruit[i];i++) {
if(fruit[i].checked) {
if(count > kosuu[fruit[i].value] ) {
alert('産地のチェックおおすぎ '+kosuu[fruit[i].value]+'個まで');
return false;
} else break;
}
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return sample()">
<p>
<label><input type="radio" name="fruit" value="りんご" onclick="sample()">りんご</label>
<label><input type="radio" name="fruit" value="みかん" onclick="sample()">みかん</label>
</p>
<p>
<label><input type="checkbox" name="sanchi" value="" onclick="sample()">青森産</label>
<label><input type="checkbox" name="sanchi" value="" onclick="sample()">愛媛産</label>
<label><input type="checkbox" name="sanchi" value="" onclick="sample()">千葉産</label>
</p>
<p><input type="submit"></p>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

迅速なご回答ありがとうございます。大変感謝しております。
サンプル通りに動かすことができましたが、思わぬエラーになってしまいました。
というのは、産地のnameが fld3[]という形にしなければならず、これだと動きません。
たぶん、[]があるのでjavascriptで配列？として読み取ってしまうようです。
色々と今サイトを見て解決策を探しております。

var count = 0;
var fld3[] = document.getElementsByName('fld3[]');
for(i=0;fld3[][i];i++) if(fld3[][i].checked) count++;
var fld1 = document.getElementsByName('fld1');
for(i=0;fld1[i];i++) {
if(fld1[i].checked) {
if(count > kosuu[fld1[i].value] ) {
alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。');
return false;
} else break;
}
}
return true;
}
</script>

通報する
お礼日時：2010/04/21 18:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報