ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。
本番環境ではこの仕組みを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>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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;
}
}
じゃないでしょうか?
有難うございました。
私の勉強不足の為、こちらのソースコードで試したのですが、動作が出来ませんでした。
本当に有難うございます。
No.1
- 回答日時:
//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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景色を変えて未入力チェック...
-
チェックボックスの設定
-
特定のID(またはクラス)で括ら...
-
JSP内で可変するチェックボック...
-
配列のチェックボックスをjavas...
-
if文でelseを使わずに否定
-
確認ページからフォームページ...
-
選択したラジオボタンが画面の...
-
return trueとreturn falseの用...
-
チェックボックス付きのテーブ...
-
Selectボックスの一覧表示方法
-
onClickとsubmitの処理順序
-
onchangeイベントを強制的に発...
-
マウスをブラウザの外に出した...
-
formのfileの値をhiddenでも持...
-
【jQuery】input nameの文字列...
-
javascriptで .jpg , .jpeg , ....
-
ボタンを押すとチェックボック...
-
二つの入力欄に、同時に同じ文...
-
JavaScriptでHTML内に記入され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
チェックボックスのON/OFFに応...
-
【jsp/Java】チェックボックス...
-
checkboxをクリックしてリロー...
-
チェックボックスで指定したも...
-
確認ページからフォームページ...
-
チェックボックスの設定
-
javascriptで確認ダイアログの...
-
フォームのチェックボックスの...
-
複数式のチェックボックス
-
背景色を変えて未入力チェック...
-
JQuery Mobileでチェックボック...
-
JSP内で可変するチェックボック...
-
チェックボックスが1つ以上チェ...
-
複数のチェックボックス項目が...
-
一方のチェックボックスのON/OF...
-
documentオブジェクトのlength...
-
チェックボックスの使い方
-
チェックボックスの無効化、有効化
-
Firefoxでテキストボックスから...
おすすめ情報