始めまして、宜しくお願いします。
よく、javascriptで自動計算ってありまりますが、
一つの項目に2つの要素をいれたものを計算することは可能でしょうか。
例えば、5つのチェック項目があります。
ダイエットの目安となる運動量とその金額換算表として
設問にチェックをいれてもらいます。
設問1は「今日10km歩いた」とし、yesかnoで回答(チェックボックス記入を予定)します。チェックをいれた場合、「カロリーは10キロカロリーを消費し、牛乳3本分にあたる300円節約」と2つの要素が発生します。
設問2は「今日、腹筋100回した」とし、yesかnoで回答(チェックボックス記入を予定)します。チェックをいれた場合、「カロリーは5キロカロリーを消費し、牛乳1本分にあたる100円節約」と2つの要素が発生します。このように複数の設問を用意し、yes・noチェックが終了すると、「本日の消費カロリーは500キロカロリーで、牛乳5本分にあたる500円節約」と最後に2項目の積算した結果をyes・noチェックだけで導くことは可能でしょうか。
何卒宜しくお願いします。
No.1ベストアンサー
- 回答日時:
方法はいろいろあると思いますので、あくまでも、可能という意味での一例
<html>
<head>
<style type="text/css">
.Q div , .result{ margin-top:1em; font-weight:bold;}
.Q input, #res { margin-left:3em; }
</style>
<script>
function calc(f) {
var i = 0, e, str, r, r1 = 0, r2 = 0;
while (e = f.elements[i++]) {
if (e.type=='radio' && e.checked) {
r = e.value.split(','), r1 += parseInt(r[0]), r2 += parseInt(r[1]);
}
}
str = '本日の消費カロリーは' + r1 + 'キロカロリーで、<br>牛乳' +
r2 + '本分にあたる' + (r2*100) + '円節約。';
document.getElementById('res').innerHTML = str;
}
</script>
</head>
<body>
<form class="Q" onclick="calc(this)">
<div>設問1: 今日10km歩いた</div>
<input type="radio" name="Q1" value="10,3">Yes
<input type="radio" name="Q1" value="0,0">No
<div>設問2: 今日、腹筋100回した</div>
<input type="radio" name="Q2" value="5,1">Yes
<input type="radio" name="Q2" value="0,0">No
</form>
<hr>
<div class="result"><結果></div>
<div id="res"></div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンのチェックが外れ...
-
javascriptでクイズ
-
【javascript】firefoxでの、al...
-
javascriptのラジオボタンの使...
-
フォームPOST後「戻る」時のチ...
-
ラジオボタンのチェック
-
jQueryで複数のラジオボタンを処理
-
ラジオボタン未チェックの場合...
-
データベースの値を判断してラ...
-
return trueとreturn falseの用...
-
チェックボックス付きのテーブ...
-
1つのページにformを2つ設置。2...
-
クリックさせたいが、click()が...
-
プルダウン選択を変更すると、...
-
新しくフォルダを作成したい
-
onClickとsubmitの処理順序
-
ラジオボタンと連動して文字列...
-
javascriptで二重送信防止
-
チェックボックスのON/OFFでVal...
-
jQueryで設定したイベントハン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptを使ってラジオボタ...
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
javascript作成してます。ラジ...
-
ラジオボタンにチェックを入れ...
-
ラジオボタン未チェックの場合...
-
チェックされたラジオボタンに...
-
Jvasvriptのlengthで個数が取得...
-
フォームPOST後「戻る」時のチ...
-
データベースの値を判断してラ...
-
チェックボックスのON/OFFに連...
-
ラジオボタンでチェックした項...
-
サイト内にGoogleサイトを表示...
-
JavaScript ラジオボタン デ...
-
ラジオボタンでdisabledとchecked
-
リンク文字クリックでラジオボ...
-
ポップアップウインドウで選択...
-
jQueryで複数のラジオボタンを処理
-
js radioボタンの「name」を多...
-
ラジオボタンとif文
おすすめ情報