• ベストアンサー

チェックボックス可否条件記述ソースについて

はじめまして。 初心者でJaveScriptについて教えて欲しいことがあります。 簡単なマニュアルにてチェックボックスの作成方法などの 勉強はしました。 が、チェックボックスにチェックできるようになる条件を どういう風にソースにプログラムしてよいのかわかりません。 具体的には、 項目が大きく分けて２種類（AとBが）あります。 Aをチェックボックスでチェックすると、有効になるチェックボックスが２つ（CとDが）あり Bをチェックボックスでチェックすると、有効になるチェックボックスが４つ（EとFとGとHが）あります。 条件として、AかBかどちらか一つしかチェックすることは できません。 現状同一form内でA～Hまですべてチェックできるようになっており なるべく同一form内の条件だけを変更したいと考えております。 どうか、よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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>

googooganmo
質問者

お礼

私が 初心者であることを よく理解していただきありがとうございます。 わかりやすかったです！

その他の回答 (1)

noname#84373
noname#84373
回答No.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>

googooganmo
質問者

お礼

ありがとうございます。 今回は どうしてもチェックボックスで やりたかったのです。 でも ラジオボタンでやるほうが良いのですね！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • チェックボックスの連動でJavaScriptの記述を短くしたい。

    【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。 【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。 以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。 /************参考ソースです*****************/ <html> <head> <title>無題ドキュメント</title> <script> function check_a(){ if(document.form.a.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_b(){ if(document.form.b.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } function check_aa(){ if(document.form.aa.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_bb(){ if(document.form.bb.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } </script> </head> <body> <form name="form"> 項目【あ】 <input type="checkbox" name="a" onclick="check_a()"> A<BR> <input type="checkbox" name="b" onclick="check_b()"> B<BR> <br /> 項目【い】 <input type="checkbox" name="aa" onclick="check_aa()"> A<BR> <input type="checkbox" name="bb" onclick="check_bb()"> B<BR> <br /> </form> </body> </html> /*************************/ 何卒、宜しくお願い申上げます。m(_ _)m

  • サブフォームにチェックボックス・・・・

    accessにて・・・ サブフォームに表示させるレコードと連結したチェックボックスは付けられますか？ たとえば・・・ （B→チェックボックスです） （サブフォームイメージ） ｜項目A　｜項目B　｜項目C　｜項目D B ｜Aデータ｜Bデータ｜Cデータ｜Dデータ B ｜Aデータ｜Bデータ｜Cデータ｜Dデータ みたいな感じで、レコードセレクタ代りにチェックボックスを付ける感じで・・・ やってみたんですが、すべてにチェックが入ってしまいます・・・やはり無理なのでしょうか？教えてください

  • チェックボックスについて

    以前にもお世話になりました。 今回もチェックボックスのことで教えてください。 ・チェックボックスA・B ・コンボボックス(OPTION　1.条件なし　2.りんご　3.みかん) ・テキストボックス があるとします。 チェックボックスBの時はコンボボックス・テキストボックスは両方選択不可にしたいです。 Aの時はどちらか一方を指定したらもう1つは選択できないようにしたいです。コンボボックスの内容が「条件なし」の時でもテキストは不可にしたいです。 分かられる方いらっしゃいましたら、 よろしくお願いします。

  • 多数のチェックボックスをつかった分岐について

    現在、チェックボックスとリストボックスで条件を選択して条件に合う検索結果を出力するプログラムを作っています。 やりたいことは、チェックボックスは複数選択可能で、リストボックスとチェックボックスの組み合わせによってそれぞれ出力結果を変えたいです。リストボックスには項目が3つ、チェックボックスには項目が6つあります。 ここでそれぞれif文で分岐しようと考えたんですが、あまりにもパターンが多すぎて どうしようという状況です。なにかいい方法がありますでしょうか。 よろしくお願い致します。

  • エクセルのチェックボックスと条件付き書式のコピーについて

    エクセルのチェックボックスと条件付き書式のコピーについて エクセル2007を使用しているのですがチェックボックスと、条件付き書式を設定したセルのコピー&ペーストができません。 どのようにすればいいのでしょうか？ B列D列にチェックボックスをおいて、B列の結果をE列に反映させTRUEならH4が青になり、D列の結果をF列に反映させTRUEならH4が赤になり、どちらにもチェックが入っていなければH4はそのままにするというところまでは作れたのですが、行数も５０行ほどあり、反映させるセルも１つづつ違うのですが、コピーと貼り付けで簡単に行を増やしたりすることはできないのでしょうか？また、他にもシートが１５ほどありますので、気が遠くなる作業になりそうです。 添付画像は１つ１つ設定していきました。 設定は下記のようにしました。 チェックボックスのコントロールの書式設定のリンクするセルは「$D4」「$E4」と設定しており、 また、H1は条件付き書式で、ルール「=$E4=TRUE」書式「青の塗りつぶし」適用先「=$H$4」 　　　　　　　　　　　　　ルール「=$D4=TRUE」書式「赤の塗りつぶし」適用先「=$H$4」 としています。 初心者ですので、質問の意味などが分かりにくいかと思いますが回答よろしくお願いします。

  • チェックボックスの使い方

    VBスクリプトでよくわからないところがあるので教えてください。たくさんのチェックボックスがあるので、For i To ～Next の構文を使って効率よくチェックされたものだけSQLの構文に取り入れて検索しようとしたのですがうまくゆきません。どのようにしたらよいでしょうか。 今試してみたのは、検索条件の設定画面で、 <input type=checkbox name=tatemono(0) value=自社使用>自社使用 <input type=checkbox name=tatemono(1) value=事業用>事業用 <input type=checkbox name=tatemono(2) value=電算センター >電算センター というようなチェックボックスを 検索処理用ページで SQL="SELECT * FROM [データ] " 'チェックボックスのチェック数が0でなければWHERE文をいれるflagをTrueにしておく If Request.Form("tatemono").Count>0 Then SQL=SQL & "WHERE " flag=True End If 'チェックボックスを最初から調べてチェックされていたらその項目がyesになっているという条件をSQL文に追加する For i=1 To Request.Form("tetemono").Count If Request.Form("tatemono")(i)<>"" Then fldname=Request.Form("tetemono")(i) If flag=True Then SQL = SQL & "AND" Else SQL = SQL & "WHERE" End If SQL= SQL & fldname & "=Yes" End If Next とやってみたのですが、ぜんぜん駄目みたいです。 根本的にどこか間違ってますよね・・・。 直すところを教えてください。 お願いします。

  • チェックボックスの値を、ページまたぎさせる

    質問内容が伝わりにくかったら申し訳ありません。 現在、aspを使い、以下のようなプログラムを組もうとしています。 [ファイル] 1.asp 1-1.asp 2.asp [仕様] ○1.aspにある「A」ボタンを押すと、1-1.aspが別窓で開く。 ○1-1.aspにはチェックボックスが30個、「確定」ボタン、「戻る」ボタンがある。「確定」ボタンを押すと、チェックボックスの値を保持し、1-1.aspを閉じる。「戻る」ボタンを押すと、チェックボックスの値を保持せず、1-1.aspを閉じる。 ○1.aspにある「B」ボタンを押すと、2.aspが開く。 ○2.aspにおいて、1-1.aspでチェックされた値を利用する。 つまり、1-1.aspでチェックした値を、2.aspで利用したいのです。 私が考えたプログラムは、以下のとおりです。 しかし、このプログラムだと、(1)の行でエラーが起きてしまうようです。 [1-1.asp] <form method=post action="2.asp"> <input type=checkbox name="chk" value="1"> <input type=checkbox name="chk" value="2"> <input type=checkbox name="chk" value="3"> ・ ・ <input type=checkbox name="chk" value="30"> </form> [2.asp] <% SCRIPT LANGUAGE = JAVASCRIPT %> <% Dim a,a_split,b a=Request.Form("chk") ・・・(1) a_split=split(a,",") for each b in a_split Response.Write(b) next %> <input type=hidden>で送る方法等も検索してみましたが、やはり「次のページへチェックボックスの値を送る」方法はあるのですが、「ページをまたぐ」ような処理が分かりません。 どなたか、[仕様]を達成できるようなプログラムのご教授をお願いいたします。

  • 他フォームのチェックボックスを参照した条件付書式

    OS WinXP ACCESS 2000 ■[フォームＡ]にチェックボックスを設置して 条件付書式にてチェックボックスのＯＮで任意フィールドに色を点けています。 ※チェックボックスは連結チェックボックスです。 　条件付書式の式　[チェックボックス名]=True この方法で問題なく[フォームＡ]の任意のフィールドに色を点けることはできました。 ■ここからが質問です。 この[フォームA]に設置してあるチェックボックスがＯＮの時 [フォームＢ]に設置してある非連結テキストボックスにも色を点けたいです。 ※[フォームA]に設置したチェックボックスは、どのレコードがＯＮの状態でも [フォームＢ]のテキストボックスに色を点けたいです。 目的は [フォームＡ]の任意フィールドに重要なコメントが入力されている場合 [フォームＢ]を開いている時に一目で分かる様にしたいので…。 一応、[フォームＢ]の非連結テキストボックスに 条件付書式の式に 　[Forms]![フォームＡ名]![チェックボックス名]=True としましたがうまくいきませんでした…。 ※フォームは[フォームＡ][フォームＢ]ともに単票形式です。 宜しくお願い致します。

  • Access チェックボックスへのVBAの書き方

    □がチェックボックス、各項目はframeで囲ってあります。 ＜項目１＞ A□　B□　C□　D□ ＜項目２＞ A□　B□　C□　D□ ＜項目３＞=======fraEF：このフレームの名前 E□　F□ ●やりたいこと １．画面を開けると＜項目１＞及び＜項目２＞のみ表示され、＜項目３＞は非表示（今のところこれはできています） ２．＜項目１＞及び＜項目２＞でCのチェックボックスにチェックをいれると＜項目３＞が表示され、EもしくはFに入力が必要（なんとなくできているのですが、も確実にしたい） ●現状プロシージャー ＜項目１＞＜項目２＞Cのプロシージャ-に Private Sub チェックXXXXX_GotFocus() fraEF.Visible = True End Sub とし、 それ以外は Private Sub チェックXXXXX_GotFocus() fraEF.Visible = False End Sub としています。 《改善したい点》 １．＜項目１＞でCにチェックをいれると、＜項目３＞のフレームとEFチェックはでる。しかし、＜項目２＞でチェックでA,B,Dを選ぶと、＜項目３＞とEFチェックが消えてしまう。＜項目１＞で選んだ場合は、残しておきたい。 ２．＜項目１＞＜項目２＞でCをチェックした場合は、EFのチェックを忘れないようにエラーを発生させたい。 上記説明でわかりますでしょうか？ どうぞよろしくお願いいたします。 参考 ●自分の持っている本によると、このような作業をするには、プロシージャーを更新後処理へとありますが、チェックボックスのプロパティには、【フォーカス取得後、フォーカス喪失後、マウスボタンクリック時、マウスボタン移動時、マウスボタン解放時、キークリック時、キー解放時、キー入力時】しかありません。

  • form で、チェックボックスにまとめてチェック

    データベースから、データを持ってきて、複数のグループに分けてまとめてチェックを入れようとしています。 複数のチェックボックスがある場合はいいのですが、チェックボックスが一つしかない場合に チェックが入りません。 どの様に変更すれば、一つでもチェックが入るようになるでしょうか？ 以下の様なサンプルコードを見ながら、作成しています。 function AllChecked1(){ var check = document.form.a1.checked; for (var i=0; i<document.form.elements['aa1[]'].length; i++){ document.form.elements['aa1[]'][i].checked = check; } } <form name="form" method="POST" action="select1.php"> <input type="checkbox" name="a1" id="a1" onClick="AllChecked1();" /><label for="a1"> group1 全選択</label> <input type="checkbox" name="aa1[]" id="aa11" value="1" /><label for="aa11">名前1</label><br /> </form> よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する