電子書籍の厳選無料作品が豊富！

チェックボックスのチェック処理

解決済

  • 質問者：noname#90757
  • 質問日時：
  • 回答数：3件

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>

すみませんがよろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

こういう場合はまず、カテゴリーわけを先にします。


各チェックボックスに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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： hkd9001
  • 回答日時：

こんばんは。


こんな感じで、用が足りそうな気がします。
複数あるものの中から１つだけを選択するのならば、チェックボックスでなくラジオボタンやリストボックス（プルダウン）を用いるのが一般的です。


<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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： leap_day
  • 回答日時：

テーブル部分は省略してます（＞＜）



<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種類を選択したらアラートコメントが出ます
カテゴリー○チェックのところ同じ繰り返しなので簡略化できそうなのですが知識不足でできませんでした（＞＜）
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報