购物车复选框div怎么做
① JS/Jquery复选框控制多个对应div的显隐要如何实现
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js
"></script>
</head>
<body>
<div id="dd1">淘宝</div>
<div id="dd2">新浪</div>
<div id="dd3">网易</div>
<div id="dd4">天猫</div>
</div>
<input type="checkbox" checked="checked" value="dd1" />淘宝<br />
<input type="checkbox" checked="checked" value="dd2" />新浪<br />
<input type="checkbox" checked="checked" value="dd3" />网易<br />
<input type="checkbox" checked="checked" value="dd4" />天猫<br />
<script type="text/javascript">
$(":checkbox").each(function () {
$(this).click(function () {
if ($(this).attr("checked") == "checked") {
$("#" + $(this).val()).hide();
$(this).attr("checked",false);
} else {
$("#" + $(this).val()).show();
$(this).attr("checked",true);
}
});
});
</script>
</body>
</html>
② html将一个div中已选择的checkbox通过jquery添加到另一个div中
js
===========================================================
<scriptlanguage="javascript"src="script/jquery-1.7.1.min.js"></script>
<script>
functiongogogo(ob){
$('#div2').append('<p>'+ob+'</p>');
}
</script>
html
==============================================================
<divid="div1">
<p>
<inputtype="checkbox"value="西瓜"id="select"onChange="gogogo(this.value);">
西瓜
<inputtype="checkbox"value="香蕉"id="select2"onChange="gogogo(this.value);">
香蕉
<inputtype="checkbox"value="苹果"id="select3"onChange="gogogo(this.value);">
苹果
<inputtype="checkbox"value="葡萄"id="select4"onChange="gogogo(this.value);">
葡萄</p>
</div>
<divid="div2">
</div>
③ 想做一个简单的购物车界面，非常简单就行有代码！用div+css做就可以
购物车外是可以的 但是核心最好还是用程序本来的核心如果自己写，很有单独
④ 如何通过js实现勾选复选框
js勾选复选框示例i：
//获取页面所有checkbox（checkbox的name设置一致）
varitems=document.getElementByName("checkbox的name");
//遍历checkbox
for(vari=0;i<items.length;i++){
//当前回checkbox实现答勾选
items[i].checked=true;
}
⑤ angular js 带复选框购物车怎么写
前段时间研究过这个，并且写了一个购物车的小例子，今天一个偶然的机会提起，可惜忘了差不多了，糊里糊涂的也没说清楚。翻出来，提醒下自己，保持一颗学习的心，顺便再复习一遍。
先上一个最终的效果图
构图比较简单，主要功能：
1. 点击购买的时候 进行数量的增加或者条目的增加，同时总价格变化；
2. 进行删除的时候，删除当前条目，总价变化；
3. 进行数目增加减少的时候，总价格变化；
好，下面说代码，抓耳挠腮的想想，有点久远印象不太深刻了；
关于angular的基本用法，这里就不唠叨了，网上好多的教程；
首先是商品列表，这里自己随意列举了一些
<script>
var items = [{
id : '1',
name : '蜂蜜',
price : 30.00
},{
id : '2',
name : '黄豆酱',
price : 15.8
},
{
id : '3',
name : '护手霜',
price : 15.00
},
{
id : '4',
name : '保温杯',
price : 29.9
},
{
id : '5',
name : '鼠标',
price : 39.9
},{
id : '6',
name : '米老头',
price : 8.8
}];
//购物车中的数据;
var boughtList = {};
</script>
主要的html代码，重新注释下也让自己再熟悉一遍
<div class="wrap" ng-controller="showItem"><!-- ng-controller ng的语法 -->
<h5>商品列表</h5>
<div class="left itembox border" >
<ul>
<li class="left" ng-repeat="value in items" item-id={{value.id}}>
<p>{{value.name}}</p>
<p> {{value.price}}</p>
<p>
<a href="javascript:void(0);" ng-click="buyAction($event);"
name={{value.name}} price={{value.price}} item-id={{value.id}} >购买</a>
<!-- dom 事件时的$event 就相当于普通dom事件中的window.event 对象-->
</p>
</li>
</ul>
</div>
<!-- 购物车中的数据 -->
<div class="boughtlist border">
<ul>
<li ng-repeat="value in boughtList" item-id={{value.id}}>
<span>{{value.name}}</span>
<span>{{value.price}}</span>
<span style="width:100px;" item-id={{value.id}}>
<a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a>
<input class="border" type="number" min=0 ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num);"/>
<!-- 这里的ng-change 是值发生变化时触发的事件，其实这里我原先想处理成 一个自动的mvc过程，无果，只好加事件了-->
<a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a>
</span>
<a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >删除</a>
</li>
</ul>
<p ng-init=0 >总价格：{{ total | number:1}}</p>
<!-- angular的优势体现，number：1也就是number数据，小数点后一位。-->
</div>
我记得，当时觉得比较麻烦的是 input没有ng-blur事件；
看下js代码
var ng = angular;
var myapp = ng.mole('myapp',[]);
var common = {
getTotal : function(total){ //每次重新清零 算出总价，这样的话为什么还要传total参数？当时怎么想的？
total = 0;
for(var k in boughtList){
if(boughtList[k]){
if(boughtList[k].num <=0){
boughtList[k].num = 0;
}
total += boughtList[k].num*boughtList[k].price;
}
}
return total;
}
}
myapp.controller('showItem',function($scope){
$scope.items = items;
$scope.boughtList = boughtList;
$scope.total = 0;
for(var k in boughtList){
if(boughtList[k]){
$scope.total += boughtList[k].num*boughtList[k].price;
}
}
$scope.buyAction = function($event){
var el = $event.target;
var id = el.getAttribute('item-id');
if(boughtList[id]){
boughtList[id].num += 1;
}else{
var arr = [];
arr.name = el.getAttribute('name');
arr.price = el.getAttribute('price');
arr.num = 1;
arr.id = id;
boughtList[id] = arr;
}
$scope.total = common.getTotal($scope.total);
}
$scope.delItem = function($event){
var li = $event.target.parentNode;
li.parentNode.removeChild(li);
var id = $event.target.getAttribute('item-id');
if(boughtList[id]){
delete boughtList[id];
}
$scope.total = common.getTotal($scope.total);
}
$scope.changeNum = function($event,num){
var id;
if(typeof $event == 'string'){
id = $event;
}else{
id = $event.target.parentNode.getAttribute('item-id');
}
boughtList[id].number = num;
$scope.total = common.getTotal($scope.total);
}
});
⑥ 2.在html中怎么使一个div中的所有复选框全选和反选，写出JS脚本。
var div=document.getElementById(div的id);
var chks=div.getElementsByName(checkbox的name); //checkbox设为同一个name
for(var i=0;i<chks.length;i++){
chks[i].checked;//全选
chks[i].checked=!内chks[i].checked //反选容
}
⑦ JS实现的“多复选框控制多DIV的显隐”要怎样简化JS代码
<divid="dd1">淘宝</div>
<divid="dd2">新浪</div>
<divid="dd3">网易</div>
<divid="dd4">天猫</div>
</div>
<inputtype="checkbox"id="ck1"value="dd1"/><labelfor="ck1">淘宝</label><br/>
<inputtype="checkbox"id="ck2"value="dd2"/><labelfor="ck2">新浪</label><br/>
<inputtype="checkbox"id="ck3"value="dd3"/><labelfor="ck3">网易</label><br/>
<inputtype="checkbox"id="ck4"value="ck4"/><labelfor="ck4">天猫</label><br/>
<scripttype="text/javascript">
$(":checkbox").each(function(){
$(this).click(function(){
if($(this).attr("checked")=="checked"){
$("#"+$(this).val()).hide();
}else{
$("#"+$(this).val()).show();
}
});
});
</script>
⑧ 勾选复选框实现隐藏div
<divclass="form-groupclearfix">
<divclass="tiaokuan_box">
<inputid="isyqm"name="isyqm"type="checkbox"checked="checked"class="check-input"onchange="cg(this)">
<span>使用邀请码</span>
</div>
</div>
<divclass="form-groupclearfix">
<labelclass="form-label">邀请码</label>
<divclass="lform-divyzm">
<inputclass="form-control"id="txtInviteCode"name="txtInviteCode"type="text">
</div>
</div>
<inputtype="hidden"id="yqm"name="yqm"value="1"/>
//000000000
varcg=function(ck){
vardiv=ck.parentElement
.parentElement
.nextElementSibling;
if(ck.checked){
div.style.display="block";
yqm.value=1;
}else{
div.style.display="none";
yqm.value=0;
}
}
⑨ css怎样改变复选框的样式
其实这个不能算是复选框了，用<span style="background:没勾的图"></span>
用JS控制，当你鼠标点击span的时候，改变他的background；就变成 这样好看的