实践 - 隐藏显示 ¶

本文导航

本次实践的主要训练知识点

作者：KK
发表日期：2016.2.20

本次实践的主要训练知识点 ¶

通过document对象的方法获取标签的Dom元素对象
根据元素对象的属性(checkbox的checked属性)做业务逻辑判断
change事件的初步了解
label标签的for属性与checkbox的id属性关联
confirm函数的实例应用

咱这回换个方式,直接贴代码加效果,里面的代码都是之前学过的知识哦,你看我的代码备注说明应该能进一步清楚它的原理了

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>买菜</title>
<script type="text/javascript">
function sum(){
	var allMoney = 0;
	
	//取得三个钩选框
	var heicaiCheckbox = document.getElementById('heicai'),
		baicaiCheckbox = document.getElementById('baicai'),
		hongcaiCheckbox = document.getElementById('hongcai');

	//checkbox元素对象钩选状态可以通过checked属性来得知,钩了就是true,没钩就是false
	if(heicaiCheckbox.checked){		
		allMoney += 3.8;
	}
	if(baicaiCheckbox.checked){
		allMoney += 1.1;
	}
	if(hongcaiCheckbox.checked){
		allMoney += 99;
	}
	document.getElementById('payMoney').innerHTML = allMoney; //将总价数值设置到payMoney那个label的内部HTML里面
}

function pay(){
	var payMoney = document.getElementById('payMoney').innerHTML; //取出总价
	if(payMoney == 0){
		alert('请先钩选要购买的菜色');
		return;
	}
	
	var isOK = confirm('总共要支付' + payMoney + '元,确定支付吗?');
	if(!isOK){
		return;
	}
	alert('已成扣除' + payMoney + '元,谢谢下次光临!');
	
	//恢复到无选择状态
	document.getElementById('heicai').checked = false;
	document.getElementById('baicai').checked = false;
	document.getElementById('hongcai').checked = false;
	sum();
}
</script>
<style type="text/css">
ul{list-style-type:none; padding:0;}
ul label{cursor:pointer;}
</style>
</head>
<body>
	<ul>
		<li>
			<input type="checkbox" id="heicai" onchange="sum()"/>
			<label for="heicai">黑菜(3.8元)</label>
		</li>
		<li>
			<input type="checkbox" id="baicai" onchange="sum()"/>
			<label for="baicai">白菜(1.1元)</label>
		</li>
		<li>
			<input type="checkbox" id="hongcai" onchange="sum()"/>
			<label for="hongcai">红菜(99元)</label>
		</li>
	</ul>
	
	<p>总价:<label id="payMoney">0</label>元</p>
	<button type="button" onclick="pay()">支付</button>
</body>
</html>

效果如下: