- ベストアンサー
チェックボックス可否条件記述ソースについて
はじめまして。 初心者でJaveScriptについて教えて欲しいことがあります。 簡単なマニュアルにてチェックボックスの作成方法などの 勉強はしました。 が、チェックボックスにチェックできるようになる条件を どういう風にソースにプログラムしてよいのかわかりません。 具体的には、 項目が大きく分けて２種類（AとBが）あります。 Aをチェックボックスでチェックすると、有効になるチェックボックスが２つ（CとDが）あり Bをチェックボックスでチェックすると、有効になるチェックボックスが４つ（EとFとGとHが）あります。 条件として、AかBかどちらか一つしかチェックすることは できません。 現状同一form内でA～Hまですべてチェックできるようになっており なるべく同一form内の条件だけを変更したいと考えております。 どうか、よろしくお願いします。
- googooganmo
- お礼率6% (3/47)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
理解しやすいように書いてみました。 分量は非常に多くなってしまいましたが、改造が楽だと思いますよ～。 <script type="text/javascript"> //まず、子オブジェクトを無効にします。 function A_dis(){ document.sample.C.disabled=true; document.sample.D.disabled=true; } function B_dis(){ document.sample.E.disabled=true; document.sample.F.disabled=true; document.sample.G.disabled=true; document.sample.H.disabled=true; } //クリック毎に処理する関数を作ります。 function mycheckA(){ if(document.sample.A.checked == true){ //親の状態を監視して document.sample.B.checked=false; //AがチェックされたらBのチェックを外す document.sample.C.disabled=false; document.sample.D.disabled=false; B_dis(); } } function mycheckB(){ if(document.sample.B.checked == true){ //親の状態を監視して document.sample.A.checked=false; //BがチェックされたらAのチェックを外す document.sample.E.disabled=false; document.sample.F.disabled=false; document.sample.G.disabled=false; document.sample.H.disabled=false; A_dis(); } } </script> <BODY onload='A_dis(),B_dis()'> <form name=sample> <INPUT type='checkbox' name='A' value='' onclick=mycheckA()><br> ┣<INPUT type='checkbox' name='C' value=''><br> ┗<INPUT type='checkbox' name='D' value=''><BR><BR> <INPUT type='checkbox' name='B' value='' onclick=mycheckB()><br> ┣<INPUT type='checkbox' name='E' value=''><BR> ┣<INPUT type='checkbox' name='F' value=''><BR> ┣<INPUT type='checkbox' name='G' value=''><BR> ┗<INPUT type='checkbox' name='H' value=''><BR> </form>
その他の回答 (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Radi or Checkbox?</title> <body> <form> <fieldset> <legend>どっちかだけならradioでしょう</legend> <div style="float:left;margin:1ex 3em 0em 0em;"> <input type="radio" name="ab" value="ga" checked>A<br> <input type="radio" name="ab" value="gb" >B<br> </div> <fieldset id="ga"> <legend>Aが選択されています</legend> <input type="checkbox" value="c">C <input type="checkbox" value="d">D </fieldset> <fieldset id="gb" style="display:none"> <legend>Bが選択されています</legend> <input type="checkbox" value="e">E <input type="checkbox" value="f">F <input type="checkbox" value="g">G <input type="checkbox" value="h">H </fieldset> </fieldset> </form> <script type="text/javascript"> //@cc_on //全角空白は半角に (function(){ document.body./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'click', function (evt) { var o = evt.target || evt.srcElement, i, d, e, f, o2, objs, c; if (o.name == 'ab') { for (i = 0; i < 2; i++) { d = ['ga','gb'][i]; f = o.value == d; e = document.getElementById(d); e.style.display = f ? 'block': 'none'; objs = e.getElementsByTagName('input'); c = 0; while (o2 = objs[c++]) if (o2.type == 'checkbox') o2.disabled = !f; } } }, false); })(); </script>
お礼
ありがとうございます。 今回は どうしてもチェックボックスで やりたかったのです。 でも ラジオボタンでやるほうが良いのですね！
お礼
私が 初心者であることを よく理解していただきありがとうございます。 わかりやすかったです！