プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：suzushiro7510
  • 質問日時：
  • 回答数：3件

チェックボックスで差引き値を計算し、
さらに差引き値を一定値以下にしないものを制作したいとおもいます。

チェックボックスごとに決まった値が引かれるものと、
チェックボックスに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>

「チェックボックスで合計値を計算に機能追加」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yuu_x
  • 回答日時：

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

yuu_x様
丁寧なご回答ありがとうございます。
希望の形での動作となりました。

jsの経験がない中での作業で
素早く、的確なコードをいただき大変助かりました。

ありがとうございました。

通報する
お礼日時：2013/01/09 11:02

No.2

  • 回答者： yuu_x
  • 回答日時：

数字の差し替えとは具体的にどのような内容になりますでしょうか？



　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つ以上にチェックで数値を減少にしたいものです。

よろしくお願いいたします。

補足日時：2013/01/09 09:41
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yuu_x
  • 回答日時：

<!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つ以上チェックで
数字が差し替わるにはどう変更したらいいでしょうか？

重ねてのご質問ですみませんが、
よければご回答いただければと思います。
よろしくお願いいたします。

補足日時：2013/01/08 18:17
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

素早く、的確なご回答をありがとうございました。
いただいたソースをそのまま入れて、希望通りの動作となりましたので、
大変助かりました。

全角スペースでインデントしてありますので、半角スペース等に置換してからご利用ください

最後のこの一文が実はよくわかってなかったりしますが、
これに関してはお任せ致します。

ありがとうございました。

通報する
お礼日時：2013/01/08 17:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報