- ベストアンサー
チェックボックスで合計値を計算に機能追加したい
- チェックボックスで差引き値を計算し、さらに差引き値を一定値以下にしないものを制作したいとおもいます。
- チェックボックスごとに決まった値が引かれるものと、チェックボックスに2つ以上チェックで一定値が引かれる2種類が希望です。
- 完成形イメージを画像添付致します。
- suzushiro7510
- お礼率50% (3/6)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （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>
その他の回答 (2)
- yuu_x
- ベストアンサー率52% (106/202)
数字の差し替えとは具体的にどのような内容になりますでしょうか？ 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 ); の部分を削除してください。
補足
yuu_x様 ご回答ありがとうございます。 >>数字の差し替えとは具体的にどのような内容になりますでしょうか？ 例えばチェックボックスが6つで、2つ以上にチェックで合計値から-0.5減少など、 現在、check1はいずれか1つで数値が減少していますが、 これを2つ以上にチェックで数値を減少にしたいものです。 よろしくお願いいたします。
- yuu_x
- ベストアンサー率52% (106/202)
<!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> <!-- 全角スペースでインデントしてありますので、半角スペース等に置換してからご利用ください -->
お礼
素早く、的確なご回答をありがとうございました。 いただいたソースをそのまま入れて、希望通りの動作となりましたので、 大変助かりました。 全角スペースでインデントしてありますので、半角スペース等に置換してからご利用ください 最後のこの一文が実はよくわかってなかったりしますが、 これに関してはお任せ致します。 ありがとうございました。
補足
お礼を申し上げた後で申し訳ないのですが、 Check1に対して、チェックボックスに2つ以上チェックで 数字が差し替わるにはどう変更したらいいでしょうか？ 重ねてのご質問ですみませんが、 よければご回答いただければと思います。 よろしくお願いいたします。
お礼
yuu_x様 丁寧なご回答ありがとうございます。 希望の形での動作となりました。 jsの経験がない中での作業で 素早く、的確なコードをいただき大変助かりました。 ありがとうございました。