ラジオボタンの選択でチェックボックスのON/OFFを連動

締切済

質問者：kuru1125
質問日時：2009/11/25 22:16
回答数：2件

ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。
本番環境ではこの仕組みを3つほど使用したいです。

現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。

さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜

どなたか教えて頂けないでしょうか？

<html>
<head>
<script>
window.onload=function(){
document.getElementById("deta1").onclick=function(){
detagroupDisabled(this.form,true);
}
document.getElementById("deta2").onclick=function(){
detagroupDisabled(this.form,true);
}
document.getElementById("deta3").onclick=function(){
detagroupDisabled(this.form,false);
}
}
function detagroupDisabled(f,flg){
var objs=f.getElementsByTagName("input");
for(var i=0;i<objs.length;i++){
if(objs[i].className=="detagroup") objs[i].disabled=flg;
}
}
</script>
</head>

<body>

<form action="./postmail.cgi" method="post">
<input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label>
<input type="checkbox" name="FPCデータアリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label>
<input type="checkbox" name="FPCデータアリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label>
<input type="checkbox" name="FPCデータアリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label>
<input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label>
<input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br>
<input type="radio" name="補強板" value="ナシ" checked="checked">ナシ
<input type="radio" name="補強板" value="アリ">アリ
<input type="checkbox" name="補強板" value="ポリイミド">ポリイミド
<input type="checkbox" name="補強板" value="ポリエステル">ポリエステル
<input type="checkbox" name="補強板" value="ガラエポ">ガラエポ
<input type="checkbox" name="補強板" value="相談">相談<br><br>
<input type="radio" name="印刷" value="ナシ" checked="checked">ナシ
<input type="radio" name="印刷" value="アリ">アリ
<input type="checkbox" name="印刷" value="銀シールド">銀シールド
<input type="checkbox" name="印刷" value="銀ペースト">銀ペースト
<input type="checkbox" name="印刷" value="銅ペースト">
銅ペースト

<input type="checkbox" name="印刷" value="シルク">シルク
色
<SELECT NAME="印刷">
<OPTION SELECTED VALUE="---">---
<OPTION VALUE="白">白
<OPTION VALUE="黒">黒
<OPTION VALUE="他">他
</SELECT> 　

</form>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： babu_baboo
回答日時：2009/11/26 09:12

//radioの要素, checkboxの名前, 状態

var allCheck = function ( element, name, flag ) {
　var form = element.form;
　var inps　= form.elements[ name ];
　var cnt = 0, e;

　flag = !!flag;

　while( e = inps[ cnt++ ] )
　　if( 'checkbox' === e.type ) {
　　　e.checked = flag;
　　　e.disabled = !flag;
　　}
};

なまえには、くうはくってやばくない？
どうせなら、かんじもやめたほうが・・・。
ぜんかくくうはくは、はんかくにでも。

いんらいんようそは、ぶろっくようのなかにとか。

<script>ようそには、typeぞくせいがひつようとか。

<!DOCTYPE～も、ひつようとか

この回答への補足

以下、全く違うものを参考に作成してみましたが、「ラジオボタンを選択するたびにチェックボックスのチェックが初期化される」
というのがまだ出来ておりません。
どなたか教えていただけるとありがたいです＞＜

<html>
<head>
<script language="javascript">
function classDisable(f,cn,fl){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn){f.elements[i].disabled=fl}
}
}
function classCheck(f,cn){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn && f.elements[i].checked==true && f.elements[i].disabled==false){return true;}
}
return false;
}
</script>
</head>
<body>
<form>
■分類<br>
<input type="radio" value="アリ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));">アリ
（
<input type="checkbox" value="DXF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">DXF
<input type="checkbox" value="ガーバ" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">ガーバ
<input type="checkbox" value="PDF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">PDF　）
<input type="radio" value="ナシ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));" checked>ナシ
<input type="radio" value="相談" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));">
相談　
■分類<br>
<input type="radio" value="ナシ" name="print" class="print" onClick="classDisable(this.form,'Kind04',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));" checked>ナシ
<input type="radio" value="アリ" name="print" class="print" onClick="classDisable(this.form,'Kind04',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));">アリ　
（
<input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀シールド
<input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀ペースト
<input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銅ペースト
<input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">シルク　
色
<SELECT name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">
<OPTION SELECTED VALUE="---">---
<OPTION VALUE="白">白
<OPTION VALUE="黒">黒
<OPTION VALUE="他">他
</SELECT> ）
</form>
</body>
</html>

補足日時：2009/11/26 12:54

通報する

- 0
- 件

通報する

この回答へのお礼

有難うございました。
私の勉強不足の為、こちらのソースコードで試したのですが、動作が出来ませんでした。本当に有難うございます。

通報する

お礼日時：2009/11/26 12:53

No.2

回答者： yyr446
回答日時：2009/11/26 09:28

chkboxのdisabledプロパティはチェックを付ける/はずすの制御でなく、

chkboxの使用の不可を切り替えに使うのだと思うのですが、....
チェックをつけたり外したりするのなら
function detagroupDisabled(f,flg){
var objs=f.getElementsByTagName("input");
for(var i=0;i<objs.length;i++){
if(objs[i].className=="detagroup") objs[i].checked=!flg;
}
}
じゃないでしょうか？