チェックボックスとの連動に関する解決方法を教えてください
- 白黒とカラーの項目を連動させる際に、白黒で選択していた場合にカラーに変更した場合、金額が加算されてしまう問題が発生しています。
- JavaScriptを使用して連動させていますが、現在正しい解決方法を見つけられていません。
- チェックをはずした時点で選択項目の金額をリセットしたいので、解決策を教えていただきたいです。
- ベストアンサー
チェックボックスとの連動
白黒とカラーの項目を連動させています。例えば白黒のチェックをはずしてカラーにチェックを入れるとすでに白黒で選択してた場合、金額が合計に加算されてしまいます。チェックをはずした時点で選択項目の金額をリセットさせたいのですが解決方法が見つかりません。Javascript勉強中で正直よくわかっていません。下記スクリプトもあっちこっち調べながら組み合わせたものです。解決策をいただけると助かります。よろしくお願い致します。 <script language="javascript"> <!-- n_table1 = new Array(0,100,200); n_table2 = new Array(0,300,400); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex] * document.form1.kazu1.value; total = total + n_table2[document.form1.koumoku2.selectedIndex] * document.form1.kazu1.value; outStr = total; document.form1.goukei.value=eval(outStr); } function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; } // --> </script> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#666"> <tr> <td>白黒</td> <td><input type=checkbox name="idcheck" id="idcheck" onClick="ctrl_check01(this.checked);"> 白黒 <select name="koumoku1"> <option>選択 <option>--------------A(100) <option>--------------B(200) </select> </tr> <tr> <td>カラー</td> <td><input type=checkbox name="idcheck2" id="idcheck2" onClick="ctrl_check03(this.checked);"> カラー <select name="koumoku2"> <option>選択 <option>--------------A(300) <option>--------------B(400) </select></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>総枚数</td> <td><input type="text" name="kazu1" size="8" maxlength="12" value="0"> 枚</td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>合計</td> <td><input type="text" name="goukei" size="8" maxlength="12" value="0"> 円</td> </tr> </table> <input type="button" value="計算する" onClick="keisan(this.form)"> </form>
- shimapiyo
- お礼率75% (12/16)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; document.forms['form1'].elements['koumoku2'].options[0].selected = true; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; document.forms['form1'].elements['koumoku1'].options[0].selected = true; } りかいりょくないからねぇ～ こんなのでいいかな？ でっ。くどいようだがradio。
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; document.form1.goukei.value=0; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; document.form1.goukei.value=0; } くりっくするたび、きんがくを０
お礼
すいません。 質問の仕方が悪かったと思います。 教えて欲しかったのは・・・ 白黒のチェックボックスを選ぶ ↓ 隣りのプルダウンメニューから100を選ぶ ↓ やっぱカラーにしたい ↓ 白黒のチェックボックスをはずす ↓ カラーのチェックボックスにチェックを入れる ↓ すると白黒で選択した100がそのまま残る ↓ 新しくカラーで300を選ぶ ↓ すると合計400になる。 ・・・ので 白黒のチェックをはずしたとき選択欄が0のデフォルト状態に戻らせたい。 ・・・てなことができるとうれしいです。 で、一応こんな感じで（下記）直して上記動作をさせたら ・・・NaNになってしまいました。。 ----------------------------- function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; document.form1.koumoku1.value=0; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; document.form1.koumoku2.value=0; } ----------------------------- 再三質問で申し訳ございませんが なにかヒントあれば、教えて頂けるとうれしいです。 今回も、ご回答ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
どっちかだけえらぶなら、checkboxじゃ～なくてradioかな。 コードをかいてみたものの、だめだしされそう^^; ぜんかくくうはくは、すべてはんかくにでも。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <form name="form1" method="post" action="#"> <fieldset> <legend>注文リスト</legend> <input type="radio" name="color_type" value="モノクロ" id="rd0" onclick="LIST(this.value);CALC()" checked> <label for="rd0">白黒</label> <input type="radio" name="color_type" value="カラー" id="rd1" onclick="LIST(this.value);CALC()"> <label for="rd1">カラー</label> <select name="list" onChange="CALC()"> <optgroup label="モノクロ"> <option value="1800" >--------------A(100)</option> <option value="2100" >--------------B(200)</option> </optgroup> <optgroup label="カラー"> <option value="10500" >--------------C(300)</option> <option value="11200" >--------------D(400)</option> </optgroup> </select> 総枚数 <input type="text" size="10" name="num" value="" onChange="CALC()"> 枚 合計 <input type="text" size="10" name="total" value=""> 円 </fieldset> </form> <script type="text/javascript"> var CALC = function () { document.forms[ 'form1' ].elements[ 'total' ].value = document.forms[ 'form1' ].elements[ 'list' ].value * document.forms[ 'form1' ].elements[ 'num' ].value; }; var SelectGroup = function ( target ) { var buffer = document.createElement( 'SELECT' ); return function ( v ) { var obj, cnt; while( obj = target.firstChild ) buffer.appendChild( obj ); for( cnt = 0; obj = buffer.childNodes[ cnt++ ]; ) if( 'OPTGROUP' === obj.nodeName && obj.label == v ) { target.appendChild( obj ); break; } } }; var LIST = SelectGroup( document.forms[ 'form1' ].elements[ 'list' ] ); LIST('モノクロ'); </script>
お礼
確かにこのやり方も有りだと思います。・・・が、すいません。 今回はチェックボックス（ラジオボタンでもいいのですが）の チェックをはずす（か、もう片方を選択する）とプルダウンメニューも初期化される・・・ということができればしたいと思っています。 もしよろしければ再度ヒントなり頂ければ助かります。 ご回答ありがとうございました。
関連するQ&A
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- javascript 計算フォーム
見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。 下記のようにnew Arrayで値を取得してますが３つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか？ 合計金額取得後ＣＧＩに送信したいので項目名は必要です。 いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。 ちなみにjavascriptの 計算フォームは部品の共存（セレクトメニューとラジオボタンなど）は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript"> <!-- n_table1 = new Array(30000,20000,18000,9000); n_table2 = new Array(8000,14800,6980); n_table3 = new Array(3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex]; total = total + n_table2[document.form1.koumoku2.selectedIndex]; total = total + n_table3[document.form1.koumoku3.selectedIndex]; outStr = "合計 : ￥" + total; document.form2.outbox.value=outStr; } // --> </script> <body> <center> <br> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#FFA828"> <tr> <td>商品 Ａ</td> <td> <select name="koumoku1"> <option>Pentium <option>Celeron <option>Athlon <option>Duron </select> </td> </tr> <tr> <td>商品 Ｂ</td> <td> <select name="koumoku2"> <option>F2MX200 <option>LE Ultra <option>Kyro </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option>Ａ社 <option>Ｂ社 <option>Ｃ社 <option>Ｄ社 <option>Ｅ社 <option>Ｆ社 <option>Ｇ社 <option>Ｈ社 <option>Ｉ社 <option>Ｊ社 <option>Ｋ社 <option>Ｌ社 </select> </td> </tr> </table> <p> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <p><br> <form name="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </center> </body> </html> ========================================
- ベストアンサー
- JavaScript
- チェックした行の色を変える
簡単にできそうかなと思ってやってみたら、泥沼状態。 チェックボックスにチェック入れたときにその行をハイライトさせ、チェックはずすと元に戻るようにしたいのですが。 【チェック入れた時の状態】 <TABLE BORDER="1"> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> <TR BGCOLOR="red"> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" CHECKED></TD> <TD></TD> </TR> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> </TABLE>
- ベストアンサー
- JavaScript
- ラジオのチェックでフォーム表示、PHPへPOSTさせたい
見よう見まねで作成したのですが、わからないので教えてください。 ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。 「OK」で表示、「NO」で非表示はなんとかできましたが、問題が２点あります。 １．test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。 「NO」のほうにcheckedをいれてみましたがダメでした。 ２．phpへとばず、test.htmlにとんでしまいます。 宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript"> <!-- function Sel(me){ if(me.value=="1"){ me.form.account.disabled=false; me.form.password.disabled=false; me.form.btn.disabled=false; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.account.disabled=true; me.form.password.disabled=true; me.form.btn.disabled=true; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display='none'; } } //--> </script> <form name="Quick1"> <form name="send" method="POST" action="aaa.php"> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">OK <input type="radio" name="AB" value="2" onclick="Seｌ(this)">NO</td></tr> <tr id="SelA"> <td></td><td> <input type="text" size="30" maxlength="5" name="account" ><br> <input type="password" size="24" maxlength="5" name="password" > <input type="submit" name="btn" value="ログイン"> </form> </td></tr> <tr id="SelB" style="display:none">・・・</form>
- ベストアンサー
- JavaScript
- javascriptでselectボックスの<OPTION>要素数の取
javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。 データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、 データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。 詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。 これはなぜでしょうか？ javascript初心者のため、初歩的な質問かもしれませんが、 教えていただけたら嬉しいです。 よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1) "+ sObj.length); //・・・・(1) 正 sObj2=oForm.elements["sel"][i]; alert("(2) "+ sObj2.length); //・・・・(2) 正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3) "+ sObj.length); //・・・・(3) 誤 sObj2=oForm.elements["sel"]; alert("(4) "+ sObj2.length); //・・・・(4) 正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> <!-- 複数件の場合 以下のコメントアウトを解除する --> <!-- <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> --> </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- セレクトボックスの内容を次のページで受け取る方法
<form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として 次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか？教えてください
- ベストアンサー
- Microsoft ASP
- 【ツリーメニューの保持】
【ツリーメニューの保持】 １．フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される 2．・必要項目を入力し、form送信、POSTで受け取る。 3.・form送信後も表示されていたツリーメニューを保持 ということを実装したいと思っています。 javascriptは初心者で、ネットで調べてつくりました。 「ラジオボタン選択でツリー表示」はできましたが 「form送信後も表示されていたツリーメニューを保持」部分が実装できません。 一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか？ よろしくお願い致します。 ------------------------------------------------------------------------------ 【php】 if($_REQUEST["mode"] == "regist") { var_dump($_REQUEST); } 【javascript】 //送信後もツリーメニュー保持 function check() { if (document.fm.type[0].checked == true) { document.getElementById('A').style.display = "block"; } else if(document.fm.type[1].checked == true) { document.getElementById('B').style.display = "block"; } } //ラジオボタン選択でツリーメニュー表示 function treeMenu(tName) { radio = document.getElementsByName('type') if(radio[0].checked) { document.getElementById('A').style.display = "block"; document.getElementById('B').style.display = "none"; } else if(radio[1].checked) { document.getElementById('A').style.display = "none"; document.getElementById('B').style.display = "block"; } 【form】 <form action="hogehoge.php" method="post" name="fm"> <input type="hidden" name="mode" value="regist"> <table> <tr> <td>タイプ</td> <td> <input type="radio" name="type" value="1" onClick="treeMenu('A')"> <input type="radio" name="type" value="2" onClick="treeMenu('B')"> </td> </tr> </table> <div id="A"> <table> <tr> <td>住所</td> <td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td> </tr> </table> </div> <div id="B"> <table> <tr> <td>電話番号</td> <td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td> </tr> </table> </div> <table> <tr> <td>年齢</td> <td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td> </tr> </table> <input type="submit" value="確認" onclick="check()"> </form>
- ベストアンサー
- JavaScript
- テーブル内のチェックボックスを、全て選択、全て解除 したい
以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript"> <!-- var count; function BoxChecked(check){ for(count = 0; count < document.form1.array[].length; count++){ document.form1.array[][count].checked = check; } } //--> </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.html よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え
セレクトボックス（A）を使用して、（A）の選択結果により（A）以降をアクティブ・非アクティブに切り替えたいのです。 アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス（C）が全て非アクティブとなってしまっているのです。 原因は何でしょうか？よろしくお願いいたします。 function setTF() { n = document.mail.Data.selectedIndex; flag = eval(document.mail.Data.options[n].value); document.mail["B"].disabled = flag; document.mail["C"].disabled = flag; } ※以下HTML※ <form action="mail.cgi" method="post" name="mail"> <table> <tr> <th>セレクトボックス（A）</th> <td><select name="Data" onchange="setTF()"> <option value="false">アクティブ</option> <option value="true" selected="selected">非アクティブ</option> </select></td> </tr><tr> <th>テキスト（B）</th> <td><input size="4" type="text" name="B" disabled="disabled" /> 才</td> </tr><tr> <th>セレクトボックス（C）</th> <td><select name="C" disabled="disabled"> <option>選択肢1</option> <option>選択肢2</option> </select></td> </tr><tr> <td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- フォーム内の値のチェックについて
このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか？ <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>
- ベストアンサー
- JavaScript
お礼
思い通りの動きです！ 説明不足で何度もお手数おかけしましてすいません。 ありがとうございました！！