チェックボックスで合計値を計算に機能追加したい

前へ 次へ
このQ&Aのポイント
  • チェックボックスで差引き値を計算し、さらに差引き値を一定値以下にしないものを制作したいとおもいます。
  • チェックボックスごとに決まった値が引かれるものと、チェックボックスに2つ以上チェックで一定値が引かれる2種類が希望です。
  • 完成形イメージを画像添付致します。
回答を見る
  • ベストアンサー

チェックボックスで合計値を計算に機能追加したい

チェックボックスで差引き値を計算し、 さらに差引き値を一定値以下にしないものを制作したいとおもいます。 チェックボックスごとに決まった値が引かれるものと、 チェックボックスに2つ以上チェックで一定値が引かれる2種類が希望です。 現在、別サイトにて参考にさせていただきました以下のソースとなっておりますが、 この形には拘りません。 数値、内容等は仮のものです。 完成形イメージを画像添付致します。 ご回答、よろしくお願いいたします。 <script language="JavaScript"> <!-- plice=new Array(); plice[0]=0.5; plice[1]=0.3; plice[2]=0.2; function keisan(){ goukei=2.5; for(i=0;i<=2;i++){ if(document.myform.elements[i].checked==true){ goukei=goukei-plice[i]; } } document.myform.total.value=goukei.toFixed(1); } //--> </script> <form name="myform"> <table cellpadding="1" cellspacing="0" border="0"> <tr> <td align="left" nowrap><font color="#999999">◆</font>イモ(1500円)</td> <td align="left"><input type="checkbox" onclick="keisan()"> 箱</td> </tr> <tr> <td align="left"><font color="#999999">◆</font>魚(4000円)</td> <td><input type="checkbox" onclick="keisan()"> 匹</td> </tr> <tr> <td align="left"><font color="#999999">◆</font>ウニ(300円)</td> <td><input type="checkbox" onclick="keisan()"> 個</td> </tr> <tr> <td align="left"><font color="#ff0000">■</font><b><font color="#ff0000">合計金額</font></b></td> <td align="left"><input type="text" name="total" value="2.5"> 円</td> </tr> </table> </form>

画像を拡大する

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

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> 　<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 　<title></title> <script type="text/javascript"> //@cc_on document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener ( /*@end@*/ 'click', function(evt){ 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　var f, i, s, v, j; 　if ( t.type != 'checkbox' ) { 　　return; 　} 　 　s = t.form.elements; 　 　if ( /(^| )Check1( |$)/.test( t.form.className ) ) { 　　f = parseFloat( s['VALUE'].defaultValue ); 　　 　　j = 0; 　　for ( i = 0; i < s.length; ++ i ) { 　　　if ( s[i].type != 'checkbox' ) continue; 　　　 　　　if ( s[i].checked ) { 　　　　j ++; 　　　} 　　} 　　 　　f -= 0.5 * Math.floor( j / 2 ); 　　 　　s['VALUE'].value = f < 2.0 ? Number(2.0).toFixed(1) : f.toFixed(1); 　　 　} else if ( /(^| )Check2( |$)/.test( t.form.className ) ) { 　　f = parseFloat( s['VALUE'].defaultValue ); 　　 　　for ( i = 0; i < s.length; ++ i ) { 　　　if ( s[i].type != 'checkbox' ) continue; 　　　 　　　if ( s[i].checked ) { 　　　　f -= parseFloat(s[i].value); 　　　} 　　} 　　s['VALUE'].value = f < 2.0 ? Number(2.0).toFixed(1) : f.toFixed(1); 　} }, false ); document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener ( /*@end@*/ 'submit', function(evt){ 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　 　if ( /(^| )Check1( |$)/.test( t.className ) || /(^| )Check2( |$)/.test( t.className ) ) { 　　evt./*@if(1) returnValue = false @else@*/preventDefault ()/*@end@*/; 　} }, false ); </script> </head> <body> 　<form action="#" class="Check1"> 　　<div> 　　　<label>1</label><input type="checkbox" name="CK1_1"><br> 　　　<label>2</label><input type="checkbox" name="CK1_2"><br> 　　　<label>3</label><input type="checkbox" name="CK1_3"><br> 　　　<input type="text" name="VALUE" value="2.5"> 　　</div> 　</form> 　<form action="#" class="Check2"> 　　<div> 　　　<label>1</label><input type="checkbox" name="CK1_1" value="0.3"><br> 　　　<label>2</label><input type="checkbox" name="CK1_2" value="0.3"><br> 　　　<label>3</label><input type="checkbox" name="CK1_3" value="0.2"><br> 　　　<label>4</label><input type="checkbox" name="CK1_4" value="0.2"><br> 　　　<label>5</label><input type="checkbox" name="CK1_5" value="0.2"><br> 　　　<label>6</label><input type="checkbox" name="CK1_6" value="0.1"><br> 　　　<label>7</label><input type="checkbox" name="CK1_7" value="0.1"><br> 　　　<input type="text" name="VALUE" value="2.5"> 　　</div> 　</form> </body> </html>

suzushiro7510
質問者

お礼

yuu_x様 丁寧なご回答ありがとうございます。 希望の形での動作となりました。 jsの経験がない中での作業で 素早く、的確なコードをいただき大変助かりました。 ありがとうございました。

その他の回答 (2)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2

数字の差し替えとは具体的にどのような内容になりますでしょうか？ 　if ( /(^| )Check1( |$)/.test( t.form.className ) || /(^| )Check2( |$)/.test( t.form.className ) ) { 　　f = parseFloat( s['VALUE'].defaultValue ); 　　 　　for ( i = 0; i < s.length; ++ i ) { 　　　if ( s[i].type != 'checkbox' ) continue; 　　　 　　　if ( s[i].checked ) { 　　　　f -= parseFloat(s[i].value); 　　　} 　　} 　　s['VALUE'].value = f < 2.0 ? Number(2.0).toFixed(1) : f.toFixed(1); 　} あたりを差し替えれば可能ですが、 また、勝手な判断で追加してしまったのですが、サーバーサイドスクリプトへ送信する場合は、 document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener ( /*@end@*/ 'submit', function(evt){ 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　 　if ( /(^| )Check1( |$)/.test( t.className ) || /(^| )Check2( |$)/.test( t.className ) ) { 　　evt./*@if(1) returnValue = false @else@*/preventDefault ()/*@end@*/; 　} }, false ); の部分を削除してください。

suzushiro7510
質問者

補足

yuu_x様 ご回答ありがとうございます。 >>数字の差し替えとは具体的にどのような内容になりますでしょうか？ 例えばチェックボックスが6つで、2つ以上にチェックで合計値から-0.5減少など、 現在、check1はいずれか1つで数値が減少していますが、 これを2つ以上にチェックで数値を減少にしたいものです。 よろしくお願いいたします。

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> 　<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 　<title></title> <script type="text/javascript"> //@cc_on document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener ( /*@end@*/ 'click', function(evt){ 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　var f, i, s; 　if ( t.type != 'checkbox' ) { 　　return; 　} 　 　s = t.form.elements; 　 　if ( /(^| )Check1( |$)/.test( t.form.className ) || /(^| )Check2( |$)/.test( t.form.className ) ) { 　　f = parseFloat( s['VALUE'].defaultValue ); 　　 　　for ( i = 0; i < s.length; ++ i ) { 　　　if ( s[i].type != 'checkbox' ) continue; 　　　 　　　if ( s[i].checked ) { 　　　　f -= parseFloat(s[i].value); 　　　} 　　} 　　s['VALUE'].value = f < 2.0 ? Number(2.0).toFixed(1) : f.toFixed(1); 　} }, false ); document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener ( /*@end@*/ 'submit', function(evt){ 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　 　if ( /(^| )Check1( |$)/.test( t.className ) || /(^| )Check2( |$)/.test( t.className ) ) { 　　evt./*@if(1) returnValue = false @else@*/preventDefault ()/*@end@*/; 　} }, false ); </script> </head> <body> 　<form action="#" class="Check1"> 　　<div> 　　　<label>1</label><input type="checkbox" name="CK1_1" value="0.5"><br> 　　　<label>2</label><input type="checkbox" name="CK1_2" value="0.5"><br> 　　　<label>3</label><input type="checkbox" name="CK1_3" value="0.5"><br> 　　　<input type="text" name="VALUE" value="2.5"> 　　</div> 　</form> 　<form action="#" class="Check2"> 　　<div> 　　　<label>1</label><input type="checkbox" name="CK1_1" value="0.3"><br> 　　　<label>2</label><input type="checkbox" name="CK1_2" value="0.3"><br> 　　　<label>3</label><input type="checkbox" name="CK1_3" value="0.2"><br> 　　　<label>4</label><input type="checkbox" name="CK1_4" value="0.2"><br> 　　　<label>5</label><input type="checkbox" name="CK1_5" value="0.2"><br> 　　　<label>6</label><input type="checkbox" name="CK1_6" value="0.1"><br> 　　　<label>7</label><input type="checkbox" name="CK1_7" value="0.1"><br> 　　　<input type="text" name="VALUE" value="2.5"> 　　</div> 　</form> </body> </html> <!-- 全角スペースでインデントしてありますので、半角スペース等に置換してからご利用ください -->

suzushiro7510
質問者

お礼

素早く、的確なご回答をありがとうございました。 いただいたソースをそのまま入れて、希望通りの動作となりましたので、 大変助かりました。 全角スペースでインデントしてありますので、半角スペース等に置換してからご利用ください 最後のこの一文が実はよくわかってなかったりしますが、 これに関してはお任せ致します。 ありがとうございました。

suzushiro7510
質問者

補足

お礼を申し上げた後で申し訳ないのですが、 Check1に対して、チェックボックスに2つ以上チェックで 数字が差し替わるにはどう変更したらいいでしょうか？ 重ねてのご質問ですみませんが、 よければご回答いただければと思います。 よろしくお願いいたします。

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

関連するQ&A

  • チェックボックス設定の方法教えてください

    チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。

  • チェックボックスとの連動

    白黒とカラーの項目を連動させています。例えば白黒のチェックをはずしてカラーにチェックを入れるとすでに白黒で選択してた場合、金額が合計に加算されてしまいます。チェックをはずした時点で選択項目の金額をリセットさせたいのですが解決方法が見つかりません。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>

  • 複数のチェックボックスをチェックしたい

    質問させてください。 複数のチェックボックスを項目別に全てチェックするような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を書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

  • チェックボックスのチェック処理

    HTMLでボタン押下時にチェックしたいことがあります。 ■カテゴリーA～Cで、カテゴリー毎に選択できるのは一つのみ 　(例)「A1・あ」と「A2・お」が選択時はNG ■カテゴリーは最大2つまで選択可能 　(例)「A1・い」と「C1・さ」が選択時はOK 　　　「A1・い」と「B2・く」と「C1・さ」が選択時はNG <html> <head> </head><body> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1">あ</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">い</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1">え</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1">く</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1">し</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">す</td> </tr> </table> <input type="submit" value="チェック"> </form> </body> </html> すみませんがよろしくお願いします。

  • valign=topが機能しません

    CGIファイル内のテーブルのtdにvalign=topを記述しましたが、テキストが上にきてくれません。 ソースは以下です。「メッセージ」の文字が上にくるようにするにはどうすれがいいか教えてください。 よろしくお願いします。 <center> <TABLE BORDER=0 CELLPADDING=10 CELLSPACING=10> <tr> <td align=right nowrap><font size=2>お名前</font></td> <td align=left> <input type="text" name="name" size="30" maxlength="100" class=textarea> </td> </tr> <tr> <td align=right nowrap><font size=2>タイトル</font></td> <td align=left><input type="text" name="title" size="50" maxlength="200" class=textarea></td> </tr> <tr> <td valign=top align=right nowrap ><font size=2>メッセージ</font></td> <td align=left><textarea name="msg" cols="50" rows="7" class=textarea></textarea></td> </tr> <tr> <td align=right nowrap><font size=2>パスワード</font></td> <td align=left><input type="password" name="pass" size="16" maxlength="200" class=textarea value=$cpass></td> </tr> <tr> <td colspan=2> <hr size=1 noshade> </td> </tr> <tr> <td align=center colspan=2> <div align="center"><input type="submit" value="投稿する" class=input2 onClick="writeCookie()"></div></td> </tr></form> </table> </center>

  • JavaScript チェックボックスで指定の箇所をチェックする方法

    初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例：横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>

  • チェックボックスの全選択/解除について

    お尋ねします。 チェックボックスの全選択/解除について １画面にチェックボックスのグループが複数（store、item）あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか？ よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){ 　for(n=0;n<=targetForm.length-1;n++){ 　　if(targetForm.elements[n].type == "checkbox"){ 　　　targetForm.elements[n].checked = flag; 　　} 　} } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目１<br/> <input type="checkbox" name="item[]" value="2" />項目２<br/> <input type="checkbox" name="item[]" value="3" />項目３<br/> <input type="checkbox" name="item[]" value="4" />項目４<br/> <input type="checkbox" name="item[]" value="5" />項目５<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>

    • 締切済み
    • PHP
  • 配列の使い方

    JavaScript 初心者です。 下記ソースでinput type="text"でname="kazu1,name="kazu2"のように２個限定で使っているのですが将来的にＤＢから読んだ数分に変わる予定です。 その場合 eval(document.myForm.kazu1.value)+　の表現はどのように変えたらいいでしょうか。 配列の数はi7で持ってきています。 <script language="JavaScript"><!-- function ttlValue(i7){ goukei = eval(document.myForm.kazu1.value)+eval(document.myForm.kazu2.value); alert("sum "+goukei+"です"); } // --></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- //　入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック＆ハイライト<BR> <FORM name="myFORM" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所：<INPUT class="white" name="Address"><BR> 氏名：<INPUT class="white" name="yourName"><BR> 年齢：<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話　<INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器　<INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • チェックした行の色を変える

    簡単にできそうかなと思ってやってみたら、泥沼状態。 チェックボックスにチェック入れたときにその行をハイライトさせ、チェックはずすと元に戻るようにしたいのですが。 【チェック入れた時の状態】 <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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する