简单的购物车

最新推荐文章于 2025-01-07 08:34:42 发布

原创最新推荐文章于 2025-01-07 08:34:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #javascript

学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>