• 締切済み

htmlでの表示の切り替えです。

こんにちは。 htmlを用いて課題を作っています。 チェックボックスを用いてその結果によってページ内に表示される文章を切り替えたいのですが、 うまくいきません。 <form name="chbox"> <input type="checkbox" value="ハンバーグ">ハンバーグ<br> <input type="checkbox" value="わかめスープ">わかめスープ<br> <input type="checkbox" value="ほうれんそうのおひたし">ほうれん草のおひたし<br> <input type="checkbox" value="サラダ">サラダ<br> <input type="checkbox" value="うどん">うどん<br> <input type="checkbox" value="バター">バター<br> <input type="button" value="オッケー" onclick="BoxCheck()"> </form> こんな風なjavaを用いているのですが・・・ 初心者なので至らぬ点はあると思いますがよろしくお願いします。 <script type="text/javascript">

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

本当に答えて欲しいのなら ブラウザ環境と、どのようなエラーが出るかと、短いのならソース全部と、どうなって欲しいのかをきちんと書いてください

  • k_kota
  • ベストアンサー率19% (434/2186)
回答No.1

何がどうなって欲しいのに、実際はどうなるのでしょうか。 これを見る分にはオッケーboxcheckが呼び出されるということしか分かりませんが、 どちらかというとそっちの方が大事なんじゃないでしょうか。 まあ、チェックボックス要素を見て、チェックされてる要素でもろもろ処理するんでしょうけど、これだけじゃどのように処理したいのかも分かりません。 さらに言うとjavaとjavascriptは別なものです。 まあ、こればっかりは名づけた人の問題がでかいですけど。

関連するQ&A

  • htmlで表示切り替えがしたいです。

    こんにちは。 htmlを用いて課題を作っています。 チェックボックスを用いてその結果によってページ内に表示される文章を切り替えたいのですが、 お力かしていただけないでしょうか? <form name="chbox"> <input type="checkbox" value="ハンバーグ">ハンバーグ<br> <input type="checkbox" value="わかめスープ">わかめスープ<br> <input type="checkbox" value="ほうれんそうのおひたし">ほうれん草のおひたし<br> <input type="checkbox" value="サラダ">サラダ<br> <input type="checkbox" value="うどん">うどん<br> <input type="checkbox" value="バター">バター<br> <input type="button" value="オッケー" onclick="BoxCheck()"> </form> javascriptをもちいるチェックボックスを考えています。 例えばハンバーグ、わかめスープにチェックをつけた場合 ページの下の方に、肉、海藻という文を表示してそこからリンクへ飛ばすようにしたいんです。 初心者で説明が不十分かもしれませんが、こんな文をかけばいけると思うというアイディアあればお願いします。

    • ベストアンサー
    • HTML
  • [javascript] checkboxによる合計の算出と表示について

    こんにちわ。 表記についてですが、javascriptによるcheckboxのvalue値を算出させようと悪戦苦闘しております・・・。 皆様のお知恵を拝借できればと思います。 至らない部分が多々あると思いますが下記に現在のソースを貼り付けますので、色々とご指摘いただければ幸いです。 (リアルタイム表示のためprototypeを使用しています。) <head><script src="prototype.js" type="text/javascript"></script> <script language="javascript"> function mprice(){ chn = 6; ttl = 0; for(i=0; i<chn; i++) { if(document.step2.elements[i].checked==true) { var pttl = ttl + eval(document.step2.elements[i].value); } else if(typeof(pttl) == "undefined") pttl = 0; } document.getElementById('pttlr').innerHTML = pttl + "円" } </script> </head> <body> <form name="step2"> <input type="checkbox" value="105" id="food" onClick="mprice()">コーラ<br /> <input type="checkbox" value="315" id="food" onClick="mprice()">肉<br /> <input type="checkbox" value="1050" id="book" onClick="mprice()">参考書<br /> <input type="checkbox" value="210" id="sweet" onClick="mprice()">飴<br /> <input type="checkbox" value="525" id="book" onClick="mprice()">マンガ<br /> <input type="checkbox" value="3150" id="music" onClick="mprice()">CD<br /> </form> <div id="pttlr">

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

    はじめまして。 初めて掲示板を利用させていただきます。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> よろしくお願いいたします。

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 3つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか? <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • チェック出来る数を制限&チェックされない場合0

    【チェックボックスにチェック出来る数を制限しながら、チェックされない場合には0を入力する】ということが希望です。 それぞれを分離させた場合は、下記で可能でした。 この2つを同時に満たす方法が分かりません。 ご教授頂きたくお願いいたします。 【チェックボックスにチェック出来る数を制限する方法】 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5"); chc = 3; // チェックできる数 // チェックボックスにチェックできる数を制限する function chBx(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.form1.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("チェックできる項目は" + chc + "個までです"); document.form1.elements[cn].checked = false; } } //--> </SCRIPT> <input type="checkbox" name="ch1" value="2" onClick="chBx('ch1')"> <label for="type1">1</label> <BR> <input type="checkbox" name="ch2" value="2" onClick="chBx('ch2')"> <label for="type1">2</label> <BR> <input type="checkbox" name="ch3" value="3" onClick="chBx('ch3')"> <label for="type1">3</label> <BR> <input type="checkbox" name="ch4" value="4" onClick="chBx('ch4')"> <label for="type1">4</label> <BR> <input type="checkbox" name="ch5" value="5" onClick="chBx('ch5')"> <label for="type1">5</label> <BR> 【チェックボックスがチェックされない場合に0を入力する】   <input type="hidden" name="ch1" value="0">   <input type="checkbox" onclick="this.form.ch1.value=this.checked ? 1 : 0">   <input type="hidden" name="ch2" value="0">   <input type="checkbox" onclick="this.form.ch2.value=this.checked ? 1 : 0">   <input type="hidden" name="ch3" value="0">   <input type="checkbox" onclick="this.form.ch3.value=this.checked ? 1 : 0">   <input type="hidden" name="ch4" value="0">   <input type="checkbox" onclick="this.form.ch4.value=this.checked ? 1 : 0">   <input type="hidden" name="ch5" value="0">   <input type="checkbox" onclick="this.form.ch5.value=this.checked ? 1 : 0"> 上記を同時に満たしたいというのが今回の質問の趣旨です。

  • selectメニューによるチェックボックスの表示・非表示

    リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見/回答を頂けませんでしょうか?宜しくお願いいたします。 <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('ctr_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('gr_'+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="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_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="gr_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>

  • チェックボックスで画像を一括表示

    下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>

  • AUだけ表示されない!

    CGIをつかって簡易データベースを作っています。 HTML出力したときに、DoCoMoとSoftbankでは表示される場所が、auだけ表示されません。 auは仕様が違うことはしっています。しかし、何が原因で表示されないかがわかりません。 みなさん力を貸してください。 表示されない箇所:formタグのところの項目名、<H1>タグの見出し文字 以下ソースです。 -------HTMLソース------- <html> <head> <title>タイトル</title> </head> <Body> <H1>タイトル</H1> <FONT size="-1"> <Hr> <BR> 【&#xE6DC;検索対象】<BR> <Form Method="get" Action="./*****.cgi"> <input type="checkbox" name="type" value="1" >&#xE6D8;項目1 <input type="checkbox" name="type" value="2" >&#xE68C;項目2 <input type="checkbox" name="type" value="3" >&#xE6B1;項目3 <input type="checkbox" name="type" value="4" >&#xE6AE;項目4 <input type="checkbox" name="type" value="5" >&#xE731;項目5 <input type="checkbox" name="type" value="6" >&#xE689;項目6 <BR> <Input Type="text" Name="search" size="20" value=""></input> <Input Type="submit" Value="検索"></input> </Form> <BR> <HR> <A Href="./*****.cgi" accesskey="0">&#xE6EB;トップページ</A><BR> <A Href="./*****.cgi" accesskey="9">&#xE6EA;管理者モード</A><BR> </font> </body></html>

    • ベストアンサー
    • HTML
  • チェックボックスにチェックしたファイルだけをダウンロードできるようにしたい

    サーバーにpdfファイルを10個保存しています。 HTMLページでチェックボックスにチェックを入れたpdfだけを ダウンロードできるようにURL入りの返信メールを自動的に送りたい のですが、やり方がわかりません。 どなたか詳しい人がおられましたら、教えていただけますでしょうか。 一応チェックボックスの過去の回答を見たのですが見当たりません。 (全て見れたわけではないですが) チェックボックス表示までは以下のところまでできたのですが。 よろしくお願いします。 <form> <input type="checkbox" name="グループ1" value="項目1">Apdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目2">Bpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目3">Cpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目4">Dpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目5">Epdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目6">Fpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目7">Gpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目8">Hpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目9">Ipdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目10">Jpdf<br><br><br><br> </form>

  • チェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

    7番のcheckboxをON→1,2,4,5番にチェックもON 7番のcheckboxをOFF→1,2,4,5番にチェックもOFF という風に動作させる記述をご教示ください。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> </script> </head> <body> <form action="" method="post" name="myform"> 去年<br> 1番<input type="checkbox" name="kyonen[]" value="1">1月<br> 2番<input type="checkbox" name="kyonen[]" value="2">2月<br> 3番<input type="checkbox" name="kyonen[]" value="3">3月<br> 今年<br> 4番<input type="checkbox" name="kotosi[]" value="1">1月<br> 5番<input type="checkbox" name="kotosi[]" value="2">2月<br> 6番<input type="checkbox" name="kotosi[]" value="3">3月<br> 7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br> </form> </body> </html>

専門家に質問してみよう