简单的jQuery计算数值、jQuery计算价格、js计算价格、jQuery计算总价、js计算总价

jQuery的一些计算了解一下
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<style type="text/css">
		.content{width: 1000px;margin: auto;}
		.content table{width: 100%;text-align: center;border-collapse:collapse;}
		.content table td,th{border: 1px solid #ccc;}
		input[type="checkbox"]{cursor: pointer;}
		input[type="text"]{width: 50px;text-align: center;margin: 5px 0}
		.clickspan{width: 20px;text-align: center;margin: 5px 0;background: #000;display: inline-block;color: #fff;cursor: pointer;}
		.tots{float: right;padding: 0 10px;}
		#show_total_price{color: red;font-weight: bold;}
	</style>
	<script type="text/javascript">

		/**
		 * 计算总价
		 * @param optobj 操作的对象
		 */
		//注意 js计算值的时候需要转换数值类型；比如：整型、浮点型
		function calculate_total_price(optobj) {
			var all_total_price = 0;//全部的总价
			jQuery(optobj).each(function () {
				if (jQuery(this).is(":checked")){
					var price = jQuery(this).val();
					var num_val = jQuery(this).parents('tr').find('.num_val').val();
					var single_total_price = (parseInt(num_val)*parseFloat(price));//单个的总价
					all_total_price += parseFloat(single_total_price);

					var single_tofixed = single_total_price.toFixed(2);//保留两位小数
					jQuery(this).parents('tr').find('.show_price').text(single_tofixed);
				}
			});
			var all_tofixed = all_total_price.toFixed(2);//保留两位小数
			jQuery('#show_total_price').text(all_tofixed);
		}

		/**
		 * 全选/取消全选
		 * @param obj 当前对象
		 * @param optobj 操作的对象
		 */
		function check_select_all(obj,optobj) {
			if (jQuery(obj).is(":checked")){
				jQuery(optobj).attr("checked",true);
			}else {
				jQuery(optobj).attr("checked",false);
			}
			calculate_total_price(optobj);
		}

		/**
		 * 单选/取消单选
		 * @param obj 对象
		 * @param optobj 操作的对象
		 * @param ids 全选框ID值
		 */
		function check_single_select(obj,optobj,ids) {
			var lens = jQuery(optobj).length;
			var nums = 0;
			jQuery(optobj).each(function () {
				if (jQuery(this).is(":checked")){
					nums++;
				}
			});
			if (nums == lens){
				jQuery('#'+ids).attr("checked",true);
			} else {
				jQuery('#'+ids).attr("checked",false);
			}
			calculate_total_price(optobj);
		}



		jQuery(function () {
			jQuery('input[name="id[]"]').click(function () {
				check_single_select(this,'input[name="id[]"]','check_all');
			});
			jQuery('.reduce').click(function () {
				var num_vals = jQuery(this).parents('tr').find('.num_val').val();
				var num_ss = parseInt(num_vals)-1;//先减去，用来判断值
				if (isNaN(num_vals) || num_ss <= 0){ //判断为字符串的时候 或者 小于等于零的时候
					jQuery(this).parents('tr').find('.num_val').val(1);
				}else {
					jQuery(this).parents('tr').find('.num_val').val(parseInt(num_vals)-1);
				}
				calculate_total_price('input[name="id[]"]');
			});

			jQuery('.increase').click(function () {
				var num_vals = jQuery(this).parents('tr').find('.num_val').val();
				if (isNaN(num_vals)){ //判断为字符串的时候
					jQuery(this).parents('tr').find('.num_val').val(1);
				}else {
					jQuery(this).parents('tr').find('.num_val').val(parseInt(num_vals)+1);
				}
				calculate_total_price('input[name="id[]"]');
			});

			jQuery('.num_val').blur(function () {
				var num_vals = jQuery(this).val();
				if (isNaN(num_vals)){ //判断为字符串的时候
					jQuery(this).val(1);
				}
				calculate_total_price('input[name="id[]"]');
			});

			jQuery('.delete_data').click(function () {
				jQuery(this).parents('tr').remove();
				calculate_total_price('input[name="id[]"]');
			});
		});

	</script>
</head>
<body>
<div class="content">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<th width="60"><label><input type="checkbox" id="check_all" onclick="check_select_all(this,'input[name=\'id[]\']')"></label></th>
			<th>名称</th>
			<th>数量</th>
			<th>单价</th>
			<th>总价</th>
			<th>操作</th>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
			<td>标题01</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="1"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>100</td>
			<td class="show_price">100</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="300"></label></td>
			<td>标题02</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="2"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>300</td>
			<td class="show_price">600</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="500"></label></td>
			<td>标题03</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="5"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>500</td>
			<td class="show_price">2500</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="230"></label></td>
			<td>标题04</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="2"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>230</td>
			<td class="show_price">460</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
			<td>标题05</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="5"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>100</td>
			<td class="show_price">500</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="222.58"></label></td>
			<td>标题06</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="6"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>222.58</td>
			<td class="show_price">1335.48</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
			<td>标题07</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="2"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>100</td>
			<td class="show_price">200</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="400"></label></td>
			<td>标题08</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="2"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>400</td>
			<td class="show_price">800</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
			<td>标题09</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="1"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>100</td>
			<td class="show_price">100</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
		<tr>
			<td><label><input type="checkbox" name="id[]" value="150"></label></td>
			<td>标题10</td>
			<td>
				<span class="clickspan reduce">-</span>
				<label><input type="text" class="num_val" value="2"></label>
				<span class="clickspan increase">+</span>
			</td>
			<td>150</td>
			<td class="show_price">300</td>
			<td><a href="javascript:;" class="delete_data">删除</a></td>
		</tr>
	</table>
	<table>
		<tr>
			<td style="border-top: 0;"><p class="tots">总价：<span id="show_total_price">0.00</span></p></td>
		</tr>
	</table>
</div>
</body>
</html>
基本显示效果：
简单的jQuery计算数值、jQuery计算价格、js计算价格、jQuery计算总价、js计算总价

猜你喜欢
