• ベストアンサー

アンケートページでチェックボタンのチェック数を表示させたい

閲覧ありがとうございます。<m(__)m> アンケートページ作成の際、JavaScriptがうまく動いてくれず、 調べても原因が分からず・・・ほとほと困り果てております。 どなたか詳しい方、よろしくお願いいたします。 ＜アンケート内容＞ ・ラジオボタン形式とチェックボタン形式 ・チェックボタンがちょっと変わっていて、チェック中にチェックした数を 　一番下のテキストフィールドに表示したい。 ＜問題＞ ・チェック数がカウントされない。 　ラジオボタンを削除して、チェックボタンのみ単独の場合は問題なく動く。 ＜記述内容＞ <head> <SCRIPT language="JavaScript"> <!--eelife ck_suu=3; //チェックボックス数 function chg(){ v=0; for (i=0; i<ck_suu; i++){ if (document.hogehoge.elements[i].checked){v++; } } msg ="チェック数は " + v + "個です。"; document.hogehoge.tBox.value = msg; } // --> </SCRIPT> </head> <body> <FORM name="hogehoge" action="../../cgi-bin/mihon.cgi" method="POST"> 御趣味はなんですか？<BR> <input type="radio" name="ご趣味は？" value="料理" id="a1" checked> <label for="a1">料理</label><br> <input type="radio" name="ご趣味は？" value="昼寝" id="a2"> <label for="a2">昼寝</label><br> <input type="radio" name="ご趣味は？" value="運動" id="a3"> <label for="a3">運動</label> <BR> <BR> ○○チェックリスト<BR> 該当するものにチェックを入れて下さい。<br> <INPUT type="checkbox" name="チェック1" value="○" id="a1" onclick="chg()">項目1<BR> <INPUT type="checkbox" name="チェック2" value="○" id="a2" onclick="chg()">項目2<BR> <INPUT type="checkbox" name="チェック3" value="○" id="a3" onclick="chg()">項目3<BR> <BR>現在のチェック数は… <INPUT size="25" type="text" name="tBox"><BR> <input type="submit" value="送信する"> </FORM> </body> 複数の質問がある場合、チェック数を表示させるのはムリがあるのでしょうか。 チェック項目は30近くあり、どのくらいチェックしているのか回答者が分かると とても便利なので諦めずにおります。。。 ダメでもともとですが、よろしくお願いいたします。

画像を拡大する

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

  • ベストアンサー
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title></title> <style type="text/css"> fieldset p { margin : 0; } </style> <script type="text/javascript"> var chk = (function chk ( get, set ) { 　return function ( node, tgt ) { 　　var i, t = 0, e, c; 　　var p = get( node, 'nodeName', 'FIELDSET'); 　　 　　if( c = p ? p.getElementsByTagName( 'INPUT' ): false ) { 　　　for( i = 0; e = c[i++]; ) if( 'checkbox' === e.type && e.checked ) t++; 　　　set( tgt, t ); 　　} 　}; })( 　function ( n, t, v ) { 　　return n ? ( v == n[t] ) ? n: arguments.callee( n.parentNode, t, v ): null; 　}, 　function ( n, v ) { 　　var a = document.getElementsByName( n ), i, e; 　　for( i = 0; e = a[ i++ ]; ) e.value = "チェック数は " + v + "個です。"; 　} ) </script> <body> <form name="hogehoge" action="../../cgi-bin/mihon.cgi" method="POST"> 　<fieldset> 　　<legend>御趣味はなんですか？</legend> 　　<p> 　　　<input type="radio" name="ご趣味は？" value="料理" id="a1" checked> 　　　<label for="a1">料理</label> 　　</p> 　　<p> 　　　<input type="radio" name="ご趣味は？" value="昼寝" id="a2"> 　　　<label for="a2">昼寝</label><br> 　　</p> 　　<p> 　　　<input type="radio" name="ご趣味は？" value="運動" id="a3"> 　　　<label for="a3">運動</label> 　　<p> 　</fieldset> 　<fieldset onClick="chk(this, 'tBox')"> 　　<legend>○○チェックリスト</legend> 　　<p> 　　　<INPUT type="checkbox" name="チェック1" value="○">項目1 　　</p> 　　<p> 　　　<INPUT type="checkbox" name="チェック2" value="○">項目2 　　</p> 　　<p> 　　　<INPUT type="checkbox" name="チェック3" value="○">項目3 　　</p> 　</fieldset> 　<p> 　　現在のチェック数は… 　　<INPUT size="25" type="text" name="tBox"> 　</p> 　<p> 　　<input type="submit" value="送信する"> 　</p> </form> </body> HTMLのぶんぽうをちぇっくしてくれるところがあるじょ。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html そこでしゅぎょうすると、れべるあっぷするかも？ まだまだ、しゅぎょうがたりてない「身」でいうのもなんですが・・・^^; if (document.hogehoge.elements[i].checked)　 これがただしく、checkboxをさししめしてないよ。

rin1987
質問者

お礼

babu_babooちゃん（ちゃんでいいのでしょうか・・・）回答ありがとうございました！ で、出来ました・・・！動く！動くです！（；；） 諦めていたので助かりました！質問して良かったです。 文法チェックもしてみました。エラーだらけでしたorz 勉強します。ありがとうございました。

その他の回答 (4)

回答No.5

きょうもさえてない。ていせいします var chk = (function chk ( set, cnt ) { 　return function ( n, t ) { 　　set( t, cnt( n.getElementsByTagName( 'INPUT' ) ) ); 　}; })( 　function ( n, v ) { 　　var a = document.getElementsByName( n ), i, e; 　　for( i = 0; e = a[ i++ ]; ) e.value = "チェック数は " + v + "個です。"; 　}, 　function ( a ) { 　　var i, e, t; 　　for( t = i = 0; e = a[i++]; ) if( 'checkbox' === e.type && e.checked ) t++; 　　return t; 　} ) に。 <fieldset onClick="chk(this, 'tBox')"> <legend>○○チェックリスト</legend> <p> <INPUT type="checkbox" name="チェック1" value="○">項目1 </p> <p> <INPUT type="checkbox" name="チェック2" value="○">項目2 </p> <p> <INPUT type="checkbox" name="チェック3" value="○">項目3 </p> </fieldset> <INPUT size="25" type="text" name="tBox"> <fieldset onClick="chk(this, 'tBox2')"> <legend>○○チェックリスト</legend> <p> <INPUT type="checkbox" name="チェック1" value="○">項目1 </p> <p> <INPUT type="checkbox" name="チェック2" value="○">項目2 </p> <p> <INPUT type="checkbox" name="チェック3" value="○">項目3 </p> </fieldset> <INPUT size="25" type="text" name="tBox2"> のようにすると、ぐるーぷたんいでこすうがでるじょ！

rin1987
質問者

お礼

babu_babooちゃん更に回答をしていただきありがとうございます。 前回のも問題なく動いてましたが・・・今回はグループ毎にチェック数がでるんですね！！すごい～応用がいろいろ出来そうです！ 助かります。ありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

個数を数えるのに、ちゃんとチェックボックスをひろっていない。 （頭から3個調べているだけ。　=　ラジオボタンを調べている） 問題ないけれど、タグに大文字と小文字が混合しているのが気持ち悪くない？ あと、idは重複してはダメです。 ついでに、 ＞ck_suu=3; //チェックボックス数 って、どうせ調べるのだし、沢山あるってことだから指定しなくてもいいんじゃ？ 要点のみ。 <html> <head> <script language="JavaScript"> <!-- function chg(evt) { var t = evt?evt.target:event.srcElement; if (t.type == 'checkbox') { t = document.forms['hogehoge']; var i = -1, n = 0, e, elm = t.elements; while (e = elm[++i]) if (e.nodeName=='INPUT' && e.type=='checkbox' && e.checked) n++; elm['tBox'].value = 'チェック数は ' + n + '個です。'; } } // --> </script> </head> <body> <form name="hogehoge" action="../../cgi-bin/mihon.cgi" method="POST" onclick="chg()"> 御趣味はなんですか？<br> <input type="radio" name="hobby" value="料理" checked> <label for="a1">料理</label><br> <input type="radio" name="hobby" value="昼寝"> <label for="a2">昼寝</label><br> <input type="radio" name="hobby" value="運動"> <label for="a3">運動</label> <p> 該当するものにチェックを入れて下さい。<br> <input type="checkbox" name="check1" value="○">項目1<br> <input type="checkbox" name="check2" value="○">項目2<br> <input type="checkbox" name="check3" value="○">項目3 <p>現在のチェック数は… <input size="25" type="text" name="tBox" readonly><br> <input type="submit" value="送信する"> </form> </body> </html>

rin1987
質問者

お礼

fujillinさん回答ありがとうございました。 同じ現象なのに皆さん書き方が違う・・・？（それすらも分からず本当に勉強不足です） タグですが、他サイト様から見本を頂いてきたり、ソフトでページを作ってたりしていたので大文字小文字ごちゃごちゃで確かに気持ち悪いです・・・。つぎはぎだらけですね。どちらかに統一したほうが綺麗ですね。直します。 idは1つの質問内で重複してはいけないのかと思っていました。1ページ内で重複してはいけないんですね・・・。でも問題なく回答は集計出来てる。不思議・・・。 ＞ck_suu=3; //チェックボックス数 って、どうせ調べるのだし、沢山あるってことだから指定しなくてもいいんじゃ？ これは必須かと思っていました。わざわざ指定しているんですね（＾＾；頂いた見本どおりに外してみます。 こんなに早く皆様から回答を頂けるとは思っていなかったので、大変助かりました。m(__)m無事に動くことが出来て便利になりました。 ポイントは回答順にさせていただきますm(__)mすみません。 ありがとうございました！

  • med2dic
  • ベストアンサー率77% (21/27)
回答No.3

とりあえず v++ のあたりに alert(document.hogehoge.elements[i].name) とでも追加してみると何をカウントしてしまっているのかがわかります。 勉強のためにも入れてみてください。 上のソースをなるべく生かそうとするとこんな感じですかね。 かなり限定的になってしまっていますが・・・ <!--eelife //ck_suu=3; //チェックボックス数 function chg(){ v=0; for (i=0; i<document.hogehoge.elements.length; i++){ if(document.hogehoge.elements[i].type=='checkbox'){ if (document.hogehoge.elements[i].checked){v++; }} } msg ="チェック数は " + v + "個です。"; document.hogehoge.tBox.value = msg; } // --> </SCRIPT>

rin1987
質問者

お礼

med2dicさん、回答ありがとうございました。 alert(document.hogehoge.elements[i].name)を入れてみました。 最初のラジオボタンの方をカウントしてしまってるようですね。 こういう風に調べると分かりやすくていいですね・・・！ 勉強になります。 回答が早くて驚きました。（無視されるかなと思っていたもので・・・） 大変助かりました。ありがとうございました！

回答No.2

＃１です。 ぜんかくくうはくは、すべてはんかくになおしてください。

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

関連するQ&A

  • チェックされたラジオボタンにフォーカスを移動したい

    <LABEL><INPUT type="radio" id="a" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="2">なし</LABEL><BR> ・・・ のようにラジオボタンがグループ別に並んでいる場合に Enterキーを押したときにフォーカスが次のラジオボタングループの チェックが入ったラジオボタンにフォーカスを移動したいのですが、 何かいい方法はないでしょうか？

  • チェックボックス　とラジオボタンの値取得について

    チェックボックス　とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合　「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は１個ですが、 □が３０個以上　のチェックボックスが５０個くらいあるので、 １回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する　のようにできるのでしょうか？ 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

  • チェック出来る数を制限&チェックされない場合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"> 上記を同時に満たしたいというのが今回の質問の趣旨です。

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

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

    ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。 本番環境ではこの仕組みを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>

  • ラジオボタンの未選択チェックについて

    ラジオボタンの未選択チェックに困っています！ フォームにInputして、CGIで送信するように設定しています。 但し、送信内容を管理者がメール受信するため、ラジオボタンの「name」は漢字にしています。 　　＜name＞ ＜value＞ Webの見やすさ　＝　見やすい　　と表示されるようにです。 <INPUT type="radio" name="Webの見やすさ" value="見やすい" id="Q11"><label for="Q11"> 見やすい</label> <INPUT type="radio" name="Webの見やすさ" value="特に問題ない" id="Q12"><label for="Q12"> 特に問題ない</label> <INPUT type="radio" name="Webの見やすさ" value="ふつう" id="Q13"><label for="Q13"> ふつう</label>　　 <INPUT type="radio" name="Webの見やすさ" value="やや見にくい" id="Q14"><label for="Q14"> やや見にくい</label>　　 <INPUT type="radio" name="Webの見やすさ" value="見にくい" id="Q15"><label for="Q15"> 見にくい</label></TD> この場合、ラジオボタンの未選択チェックは、どのようにしたら いいのでしょうか？ 今までは、「name」を英数にしていたので、下記のようにしていました。 <script language="JavaScript"> <!-- function chk(oj) { if ((oj.Q1[0].checked == false) && (oj.Q1[1].checked == false) && (oj.Q1[2].checked == false) && (oj.Q1[3].checked == false) && (oj.Q1[4].checked == false)) { alert("Ｑ１のボタンが未選択です"); return false ; } else { return true ; } }//--> </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。 「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。 どうぞよろしくお願いいたします。

  • ラジオボタンが未選択時の制御方法について

    たびたびお世話になっております。 Webフォームを思考策後しながら作成しています。 下記のラジオボタン1 とラジオボタン3 は選択して、 ラジオボタン2 は選択せずに出力する下記のように、 ハヌけした書式で出力されます。 ハヌけしないように出力させる方法はありますでしょうか？ ご教授をお願いいたします。 出力結果： ------------------------------------------------------------------------------- 【ラジオボタン1】：回答1 【ラジオボタン3】：回答1 ソース： ------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> 　<!-- 値の加工用// --> function textoutput() { 　　　　　　　<!-- フォームを変数に// --> var formObj = document.form01; 　　　　　　　<!-- radioを取得// --> var radio01 = formObj.A01; 　　　　　　　<!-- radioを取得// --> var radio02 = formObj.A02; 　　　　　　　<!-- radioを取得// --> var radio03 = formObj.A03; 　　　　　　　<!-- textを結合用の変数として準備// --> 　　　　　　　<!-- A01の中から選択されているものを取得// --> var text = '下記リカバリシートを案内' + '\n'; 　　　　　　　<!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio01.length; i ++ ) { if ( radio01[i].checked === true ) { text += '【ラジオボタン1】：' + '\n' + radio01[i].value;}} text += '\n'; 　　　　　　　<!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio02.length; i ++ ) { if ( radio02[i].checked === true ) { text += '【ラジオボタン2】：' + '\n' + radio02[i].value;}} text += '\n'; 　　　　　　　<!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio03.length; i ++ ) { if ( radio03[i].checked === true ) { text += '【ラジオボタン3】：' + '\n' + radio03[i].value;}} text += '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--ラジオボタン// --> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン2</strong><br /> <input type="radio" name="A02" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン3</strong><br /> <input type="radio" name="A03" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio1-3"> <label for="radio1-3">回答3 </label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • チェックボックスやラジオボタンでの計算

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <tr> <Td Valign="middle" Width="80">部数選択</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="radio" Name="pay" Value="100部　10000円">100部　￥10,000円<Br> <Input Type="radio" Name="pay" Value="150部　20000円">150部　￥20,000円<Br> <Input Type="radio" Name="pay" Value="200部　30000円">200部　￥30,000円<Br> <Input Type="radio" Name="pay" Value="300部　40000円">300部　￥40,000円<Br> <Input Type="radio" Name="pay" Value="300部以上　※お見積もりいたします">300部以上　※お見積もりいたします<Br> </td> </tr> <tr> <Td Valign="middle" Width="80">オプション選択<Br>（複数選択可）</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br> <Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br> <Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br> <Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br> <Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br> <Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br> <Input Type="checkbox" Name="op[]" value="ＱＲコード">ＱＲコード<Br> </td> </tr> といった感じです。 value　はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか？

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • checkbox 特定項目だけを、チェックするには

    こんにちは。いつもお世話になります。 checkbox内で、同じnameの中から特定のものだけ チェックさせるにはどうしたら良いでしょうか。 条件として、name='or52'の部分は変更出来ません。 <input type='button' value='A,B,Cだけを同時にチェック' onclick='checkAll();'> <form action='xxx.cgi' method='post' name='f1'> <input name='or5' type='checkbox' value='A'><br> <input name='or5' type='checkbox' value='B'><br> <input name='or5' type='checkbox' value='C'><br> <input name='or5' type='checkbox' value='D'><br> <input name='or5' type='checkbox' value='E'><br> <input name='or5' type='checkbox' value='F'><br> ......... </form> それで、こんなのをウェブから探してきました。 function checkAll() { for (i=0; i<7; i++) document.f1.elements["or52"+i].checked = true; } そして、同時にチェックしたいものだけ下記の様にしました。 <input name='or52' type='checkbox' value='A' id='or51'> <input name='or52' type='checkbox' value='B' id='or52'> <input name='or52' type='checkbox' value='C' id='or53'> 取りあえずできますが、エラーがでます。 「document.f1.elements["..."]は、objまたはnullではない！」 どうか教えて下さい。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する