学js不久 做了一个简易 购物车 不要嘲笑哦
购物车 可以实现 全选 ，选中了之后，价格自动增加 而且可以选择数量 如果 输入的不是正整数的时候 还会警告 全选的内容提供超链接和 复选框两种方式
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<script language="javascript" type="text/javascript">
<!--
function shopping(obj){
//此时的fruits是一个数组
var fruits=document.getElementsByName("fruit");
var fruitnum=document.getElementsByName("fruitnum");
//另外定义一个数量 不要直接用 或的的数量
var num=1;
//总价格
var totlePrice=0;
for(i=0;i<fruits.length;i++){
if(fruits[i].checked){
//在根据数量算总价格
//window.alert(fruitnum[i].value);
//先判断一下数量值是否为空 如果为空 则 默认为1
if(fruitnum[i].value=="")
{
num=1;
}
else {
num=parseInt(fruitnum[i].value);
}
//算总价格
totlePrice+=(parseInt(fruits[i].value)*num);
}
}
myspan.innerText=totlePrice;
}
//全选的函数
function allselect(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText=="全选"){
for(j=0;j<fruits.length;j++){
fruits[j].checked=true;
}
}
else if(obj.innerText=="取消"){
for(j=0;j<fruits.length;j++){
fruits[j].checked=false;
}
}
//这里在调用一下这个函数 因为这个函数默认是在 onclick下执行的 所以这里 不调用的话 会没有效果的
shopping(obj);
}
//复选框全选用的
function allselect2(obj){
var check=document.getElementsByName("check");
var fruits=document.getElementsByName("fruit");
if(check[0].checked){
for(j=0;j<fruits.length;j++){
fruits[j].checked=true;
}
}
else {
for(j=0;j<fruits.length;j++){
fruits[j].checked=false;
}
}
shopping(obj);
}
//数量选择
function num(obj){
if(obj.keyCode<48||obj.keyCode>57){
window.alert("输入值非法，重新输入");
return false;
}
}
//-->
</script>
</head>
<body>
<h1>我的购物车</h1>
<input type="checkbox" value="10" name="fruit" onclick="shopping(this)"/>苹果10元 数量
<input type="text" value="1" name="fruitnum" size="10" onkeypress="return num(event)" onkeyup="shopping(this)" /><br/>
<input type="checkbox" value="20" name="fruit" onclick="shopping(this)"/>橘子20元 数量
<input type="text" value="1" name="fruitnum" size="10" onkeypress="return num(event)" onkeyup="shopping(this)" /><br/>
<input type="checkbox" value="30" name="fruit" onclick="shopping(this)"/>栗子30元 数量
<input type="text" value="1" name="fruitnum" size="10" onkeypress="return num(event)" onkeyup="shopping(this)" /><br/>
<input type="checkbox" value="40" name="fruit" onclick="shopping(this)"/>香蕉40元 数量
<input type="text" value="1" name="fruitnum" size="10" onkeypress="return num(event)" onkeyup="shopping(this)" /><br/>
<input type="checkbox" value="50" name="fruit" onclick="shopping(this)"/>枣子50元 数量
<input type="text" value="1" name="fruitnum" size="10" onkeypress="return num(event)" onkeyup="shopping(this)" /><br/>
总价格是<span id="myspan">0</span>元<br/>
<a href="#" onclick="allselect(this)">全选</a> <a href="#" onclick="allselect(this)">取消</a><br/>
<!--复选框的 全选-->
<input type="checkbox" onclick="allselect2(this)" name="check"/>全选<br/>
</body>
</html>