jQueryで料金のシミュレーション（計算）を実装

「電気会社」のキャンペーンページを作成した際に使用した、電気料金のシミュレーション機能の制作方法をメモ。
定額料金プラス従量課金の仕組みに加え、一定額に達すると比率が変わるので、条件分岐は多め。

HTML

<section>
<form method="post">
<dl>
<dt>契約電流</dt>
<dd>
<select name="base_A">
<option value="660">20A</option>
<option value="990">30A</option>
<option value="1320">40A</option>
<option value="1650">50A</option>
<option value="1980">60A</option>
</select>
</dd>
<dt>使用量</dt>
<dd><input type="number" name="use_A">kWh</dd>
<dt>子育て応援プラン適応</dt>
<dd><input type="checkbox" name="child_A" value="1" id="child_A_checkbox">
<label for="child_A_checkbox">適応する</label></dd>
</dl>
<ul class="btn_submit">
<li><input type="submit" name="submit_simulation_A" value="この内容でシミュレーション"></li>
</ul>
</form>
<h3>シミュレーション結果</h3>
<dl class="result">
<dt>基本料金</dt>
<dd class="result_base_A">0円</dd>
<dt>従量料金</dt>
<dd class="result_use_A">0円</dd>
<dt>合計金額</dt>
<dd class="result_total_A">0円</dd>
</dl>
</section>

jQuery

$('input[name='submit_simulation_A']').click(function(){
	if($('input[name='child_A']').prop('checked')){
		var baseA = Math.round($('select[name='base_A']').val() * 0.9);
	}else{
		var baseA = $('select[name='base_A']').val();
	}
	var useA = $('input[name='use_A']').val();
	$('.result_base_A').text(separate(baseA)+'円');
	if(useA > 300){
		useAprice = ((useA-300) * 28.40)+((300 - 120) * 24.57)+(18.02 * 120);
	}else if(useA > 120){
		useAprice = ((useA-120) * 24.57)+(18.02 * 120);
	}else{
		useAprice = 18.02 * useA;
	}
	$('.result_use_A').text(separate(Math.round(useAprice))+'円');
	$('.result_total_A').text(separate(Math.round(Number(useAprice))+Number(baseA))+'円');
	return false;
})

• あおもり県民でんき（コープ組合員限定サービス）