- ベストアンサー
チェックボックスのチェック処理
HTMLでボタン押下時にチェックしたいことがあります。 ■カテゴリーA～Cで、カテゴリー毎に選択できるのは一つのみ (例)「A1・あ」と「A2・お」が選択時はNG ■カテゴリーは最大2つまで選択可能 (例)「A1・い」と「C1・さ」が選択時はOK 「A1・い」と「B2・く」と「C1・さ」が選択時はNG <html> <head> </head><body> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1">あ</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">い</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1">え</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1">く</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1">し</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">す</td> </tr> </table> <input type="submit" value="チェック"> </form> </body> </html> すみませんがよろしくお願いします。
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こういう場合はまず、カテゴリーわけを先にします。 各チェックボックスにclassを振ってやってください。 その後、チェックボックスを押すたびに毎回チェックをするのが 妥当なやりかたでしょう。 ユーザビリティーを考えると以下のようなものになります。 <script language="javascript"> function check(obj){ var f=obj.form; var checked_count=0; var checked_class=new Object(); for(var i=0;i<f.length;i++){ if(f[i].className==obj.className && f[i]!=obj){ f[i].checked=false; }else if(f[i].type=="checkbox" && f[i].checked){ checked_count+=1; checked_class[f[i].className]=true; } } for(var i=0;i<f.length;i++){ f[i].disabled=(checked_count==2 && f[i].type=="checkbox" && checked_class[f[i].className]!=true) } } </script> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1" class="cate_a" onClick="check(this)">あ</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1" class="cate_a" onClick="check(this)">い</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1" class="cate_a" onClick="check(this)">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1" class="cate_a" onClick="check(this)">え</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1" class="cate_a" onClick="check(this)">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1" class="cate_b" onClick="check(this)">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1" class="cate_b" onClick="check(this)">く</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1" class="cate_b" onClick="check(this)">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1" class="cate_c" onClick="check(this)">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1" class="cate_c" onClick="check(this)">し</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1" class="cate_c" onClick="check(this)">す</td> </tr> </table> <input type="submit" value="チェック"> </form>
その他の回答 (2)
- hkd9001
- ベストアンサー率48% (99/204)
こんばんは。 こんな感じで、用が足りそうな気がします。 複数あるものの中から１つだけを選択するのならば、チェックボックスでなくラジオボタンやリストボックス（プルダウン）を用いるのが一般的です。 <html><head> <script language="javascript"> function check(){ cnt = 0; if(document.frm.elements[1].checked) { cnt++; } if(document.frm.elements[6].checked) { cnt++; } if(document.frm.elements[10].checked) { cnt++; } if(cnt == 0) { alert('選択できるカテゴリは ２つまでです'); } } </script> </head><body> <form name="frm"> <table border="1"> <tr> <td rowspan=3>A1</td> <td><input type="radio" name="chk1" value="1">あ</td> <td rowspan=5><input type="radio" name="chk1" value="0" checked>非選択</td> </tr> <tr> <td><input type="radio" name="chk1" value="2">い</td> </tr> <tr> <td><input type="radio" name="chk1" value="3">う</td> </tr> <tr> <td rowspan=2>A2</td> <td><input type="radio" name="chk1" value="4">え</td> </tr> <tr> <td><input type="radio" name="chk1" value="5">お</td> </tr> <tr> <td>B1</td> <td><input type="radio" name="chk2" value="1"">か</td> <td rowspan=3><input type="radio" name="chk2" value="0" checked>非選択</td> </tr> <tr> <td rowspan=2>B2</td> <td><input type="radio" name="chk2" value="2">く</td> </tr> <tr> <td><input type="radio" name="chk2" value="3">け</td> </tr> <tr> <td>C1</td> <td><input type="radio" name="chk3" value="1">さ</td> <td rowspan=3><input type="radio" name="chk3" value="0" checked>非選択</td> </tr> <tr> <td rowspan=2>C2</td> <td><input type="radio" name="chk3" value="2">し</td> </tr> <tr> <td><input type="radio" name="chk3" value="3">す</td> </tr> </table> <input type="button" value="チェック" onClick="check()"> </form></body></html>
- leap_day
- ベストアンサー率60% (338/561)
テーブル部分は省略してます（＞＜） <SCRIPT language="JavaScript"> <!-- function chBx(cn){ //カテゴリーAチェック chn1 = new Array("ch1","ch2","ch3","ch4","ch5"); chc1 = 1; // チェックできる数 cnt1 = 0; for(i=0; i<chn1.length; i++) { if(document.nForm.elements[chn1[i]].checked) cnt1++; } if(cnt1 > chc1) { alert("チェックできる項目は" + chc1 + "個までです"); document.nForm.elements[cn].checked = false; } //カテゴリーBチェック chn2 = new Array("ch11","ch12","ch13"); chc2 = 1; // チェックできる数 cnt2 = 0; for(i=0; i<chn2.length; i++) { if(document.nForm.elements[chn2[i]].checked) cnt2++; } if(cnt2 > chc2) { alert("チェックできる項目は" + chc2 + "個までです"); document.nForm.elements[cn].checked = false; } //カテゴリーCチェック chn3 = new Array("ch21","ch22","ch23"); chc3 = 1; // チェックできる数 cnt3 = 0; for(i=0; i<chn3.length; i++) { if(document.nForm.elements[chn3[i]].checked) cnt3++; } if(cnt3 > chc3) { alert("チェックできる項目は" + chc3 + "個までです"); document.nForm.elements[cn].checked = false; } //チェックカテゴリー数チェック chn4 = new Array("ch1","ch2","ch3","ch4","ch5","ch11","ch12","ch13","ch21","ch22","ch23"); chc4 = 2; // チェックできる数 cnt4 = 0; for(i=0; i<chn4.length; i++) { if(document.nForm.elements[chn4[i]].checked) cnt4++; } if(cnt4 > chc4) { alert("チェックできる項目は" + chc4 + "個までです"); document.nForm.elements[cn].checked = false; } } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nForm"> <INPUT type="checkbox" name="ch1" onClick="chBx('ch1')">あ <INPUT type="checkbox" name="ch2" onClick="chBx('ch2')">い <INPUT type="checkbox" name="ch3" onClick="chBx('ch3')">う <INPUT type="checkbox" name="ch4" onClick="chBx('ch4')">え <INPUT type="checkbox" name="ch5" onClick="chBx('ch5')">お<BR> <INPUT type="checkbox" name="ch11" onClick="chBx('ch11')">か <INPUT type="checkbox" name="ch12" onClick="chBx('ch12')">く <INPUT type="checkbox" name="ch13" onClick="chBx('ch13')">け<BR> <INPUT type="checkbox" name="ch21" onClick="chBx('ch21')">さ <INPUT type="checkbox" name="ch22" onClick="chBx('ch22')">し <INPUT type="checkbox" name="ch23" onClick="chBx('ch23')">す </FORM> これでカテゴリー別では2個目、カテゴリー種類3種類を選択したらアラートコメントが出ます カテゴリー○チェックのところ同じ繰り返しなので簡略化できそうなのですが知識不足でできませんでした（＞＜）
