重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

チェックボックスの表示・非表示　動作

解決済

  • 質問者：cyaco3
  • 質問日時：
  • 回答数：2件

はじめまして。
初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。
今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。
A+AB＝AB　A+AB+E=ABE　個々までは問題なし。
既に全てのチェックが付いた上体で、ABCE－A＝BCE　となってしまい、
ABのチェックが入っていても、Aが消えてしまいます。

以下に現在のコードを張ります。
<script type='text/javascript'>
<!--
function fchk2(obj, name) {
var frm=obj.form;
if(obj.checked==true) {
/* チェックボックスが選択されている場合は、
　 テキストボックスを有効化（false）*/
for(var i=1; i<=3; i++){
frm.elements[name+i].disabled=false;
}
} else {
for(var i=1; i<=3; i++){
/* 無効化する前に、入力値をクリア */
if(name=='t'){
/* テキストボックスの場合 */
frm.elements[name+i].value='';
}else{
/* チェックボックスの場合 */
frm.elements[name+i].checked=false;
}
/* 無効化（true） */
frm.elements[name+i].disabled=true;
}
}
}


//-->
</script>

<form name='form2' action='#'>
<input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br>
<input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br>
<input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br>
<input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br>
<br>

A<input type='text' name='t1' value='テキストA'><br>
A<input type='text' name='t2' value='テキストB'><br>
A<input type='text' name='t3' value='テキストC'><br>
<br>
B<input type='text' name='b1' value='テキストA'><br>
B<input type='text' name='b2' value='テキストB'><br>
B<input type='text' name='b3' value='テキストC'><br>
<br>
<input type='checkbox' name='c1' value='1'> 選択肢C<br>
<input type='checkbox' name='c2' value='1'> 選択肢C<br>
<input type='checkbox' name='c3' value='1'> 選択肢C<br>
<br>
<input type='checkbox' name='e1' value='1'> 選択肢E<br>
<input type='checkbox' name='e2' value='1'> 選択肢E<br>
<input type='checkbox' name='e3' value='1'> 選択肢E
</form>

よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

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

かなり(script部分は全面)変えちゃったけどサンプルです。


HTML部分の変更ポイントは
各inputをpでグループ化した事。
制御用inputのvalueに制御対象の記号を入れたこと。

scriptは全面入れ替えだけど
ポイントはグローバル変数(FLAG)にチェックの入った数を持たせた事。
（用途としてはFLAGというよりCOUNTERだけど、FLAGって名前で作り始めちゃったので…）

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
// 制御用フラグ
// 0なら対象グループは無効(disabled)、1以上なら有効
var FLAG = {
'A':0,
'B':0,
'C':0,
'E':0
};
// 初期化
window.onload = function(){
var controlList = document.getElementById('CONTROL_FLAG').getElementsByTagName('input');
for(var i=0;controlList[i];i++){
if(controlList[i].checked){
var nameList = controlList[i].value.split(/,/);
for(var j=0;nameList[j];j++){
FLAG[ nameList[j] ]++;
}
}
}
for(var x in FLAG) {
fchk2_sub(x);
}
}
// チェックが変更されたら
function fchk2(obj) {
nameList = obj.value.split(/,/);
for(var i=0;nameList[i];i++) {
if(obj.checked) {
FLAG[nameList[i]]++;
} else {
FLAG[nameList[i]]--;
}
fchk2_sub(nameList[i]);
}
}
// disableの変更
function fchk2_sub(groupe_name,dsiabled_value){
var inputList = document.getElementById('GROUPE_'+groupe_name).getElementsByTagName('input');
for(var i=0;inputList[i];i++) {
inputList[i].disabled = FLAG[groupe_name]>0?false:true;
}
}
//-->
</script>
</head>
<body>

<form name='form2' action='#'>
<p id="CONTROL_FLAG">
<input type='checkbox' name='chk1' value='A'
onclick='fchk2(this)' checked>A<br>
<input type='checkbox' name='chk1' value='A,B'
onclick='fchk2(this);' checked>AとB<br>
<input type='checkbox' name='chk1' value='A,E'
onclick='fchk2(this);' checked>AとE<br>
<input type='checkbox' name='chk2' value='C,E'
onclick='fchk2(this);' checked>CとE<br>
</p>
<p id="GROUPE_A">
A<input type='text' name='t1' value='テキストA'><br>
A<input type='text' name='t2' value='テキストB'><br>
A<input type='text' name='t3' value='テキストC'><br>
</p>
<p id="GROUPE_B">
B<input type='text' name='b1' value='テキストA'><br>
B<input type='text' name='b2' value='テキストB'><br>
B<input type='text' name='b3' value='テキストC'><br>
</p>
<p id="GROUPE_C">
<input type='checkbox' name='c1' value='1'> 選択肢C<br>
<input type='checkbox' name='c2' value='1'> 選択肢C<br>
<input type='checkbox' name='c3' value='1'> 選択肢C<br>
</p>
<p id="GROUPE_E">
<input type='checkbox' name='e1' value='1'> 選択肢E<br>
<input type='checkbox' name='e2' value='1'> 選択肢E<br>
<input type='checkbox' name='e3' value='1'> 選択肢E
</p>
</form>

</body>
</html>

この回答への補足

素早いご回答ありがとうございます。
いただいたサンプルソースにて、考えていた動作が実現できました。

しかし実際に表示してみたところ、下部の選択肢部分が非常に多量であったため
上部で選択するまでは、非表示にしたいと思い、
下記選択部分をdivで囲い、CSSでdisply:noneを設定し、
下記スクリプトを追加してみました。

～
for(var i=0;inputList[i];i++) {
inputList[i].disabled = FLAG[groupe_name]>0?false:true;

//ここから

var tableList = document.getElementById('GROUPE_'+groupe_name).getElementsByTagName('table');
if(FLAG[groupe_name] > 0)
tableList.style.disply = 'block';
else
tableList.style.disply = 'none';

//ここまで
}
}

が動きませんでした。
誠に恐れ入りますが、あわせて表示/非表示を切り替えるには、
どのようにしたらよいか、またご相談に乗ってくれますでしょうか？。
よろしくお願いいたします。

補足日時：2007/10/15 13:48
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
とても助かりました。

通報する
お礼日時：2007/10/17 22:29

No.2

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

#1です。


HTML部分が不明（突然tableだてきたし）なので具体的なコードは出せませんが、とりあえず間違ってるのは、
・getElementsByTagNameは(結果が例え一つでも)配列を得るメソッドなので、
tableList.style.disply = ～
は誤りです。

tableが必ず一つなら
tableList[0].style.disply = ～
で、配列の一つ目を制御できます。

更に、tableはdivなんかと違って特殊な構造をしているのでdisplay属性は'block'ではなく'table'としないと表示が崩れます。
ただし、標準仕様に忠実な多くのブラウザではこうなんですが
IEだけはこの部分が標準と違っていてやはり'block'/'none'でないと動作しません。ブラウザの種類を判別して設定する値を変える必要があります。

と、いうか、わざわざid="GROUPE_?"配下のtableを見つけて制御するのではなく、
id="GROUPE_?"のstyleの切り替えでできませんかね？？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
steel_grayさんのおかげで解決できました。

通報する
お礼日時：2007/10/16 22:21

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報