JavaScript仿购物车（有点小BUG）

<div class="content">
			<div class="nr">
				<input type="checkbox" name="" id="btn" value="" class="btn" />
				<img src="img/comput.jpg" />
				<p class="dn">笔记本电脑</p>
				<p class="jg">￥3500</p>
				<button class="price cut">&nbsp;&nbsp;-&nbsp;&nbsp;</button>
				<input type="text" name="" id="txt" value="1" class="txt" disabled="disabled" />
				<button class="price add">&nbsp;&nbsp;+&nbsp;&nbsp;</button>
				<input type="text" name="zj" id="zj" value="3500" disabled="disabled" class="zj" />
				<p class="del">删除</p>
			</div>
		</div>
		<!--foot-->
		<div class="foot_nav">
			<input type="button" id="allBtn" value="全选" />
			<input type="button" id="noBtn" value="全不选" />
			<input type="button" id="addBtn" value="添加" />
			<input type="button" id="delBtn" value="删除" />
			<input type="button" id="jsBtn" value="点击结算" />
			<input type="text" id="money" value="" disabled="disabled" />
		</div>

			<style type="text/css">
				* {
					margin: 0;
					padding: 0;
				}
				
				.content {
					width: 800px;
					margin: auto;
					border: 1px solid #000;
					position: relative;
				}
				
				.nr {
					height: 100px;
					position: relative;
				}
				
				#btn {
					position: absolute;
					width: 20px;
					height: 20px;
					left: 20px;
					top: 38px;
				}
				
				.content img {
					position: absolute;
					left: 80px;
					top: 17px;
				}
				
				.content .dn {
					display: inline-block;
					position: absolute;
					left: 220px;
					top: 35px;
					font-size: 14px;
					color: #666666;
				}
				
				.content .jg {
					position: absolute;
					display: inline-block;
					left: 350px;
					top: 35px;
					font-size: 18px;
					font-weight: 900;
					color: red;
				}
				
				.price {
					font-size: 16px;
					position: absolute;
				}
				
				.cut {
					left: 460px;
					top: 35px;
				}
				
				.add {
					right: 241px;
					bottom: 43px;
				}
				
				#txt {
					width: 38px;
					height: 18px;
					position: absolute;
					right: 272px;
					bottom: 43px;
					outline: none;
					text-align: center;
				}
				
				#zj {
					width: 60px;
					height: 20px;
					position: absolute;
					border: none;
					right: 127px;
					bottom: 40px;
					outline: none;
					text-align: center;
					background: #fff;
					color: red;
				}
				
				.del {
					display: inline-block;
					position: absolute;
					right: 60px;
					bottom: 40px;
					cursor: pointer;
					text-decoration: underline;
					color: #666666;
				}
				
				.del:hover {
					color: #FFA500;
				}
				
				.foot_nav {
					width: 800px;
					border: 1px solid #000;
					margin: auto;
					position: relative;
				}
				
				#allBtn {
					width: 50px;
					height: 30px;
					display: inline-block;
					outline: none;
					border: none;
					background: #FFA500;
					cursor: pointer;
					text-align: center;
					text-decoration: none;
					border-radius: 5px;
					color: #FAFAD2;
				}
				
				#noBtn {
					width: 50px;
					height: 30px;
					border: none;
					background: #FFA500;
					display: inline-block;
					outline: none;
					cursor: pointer;
					text-align: center;
					text-decoration: none;
					border-radius: 5px;
					color: #FAFAD2;
				}
				
				#addBtn {
					width: 50px;
					height: 30px;
					border: none;
					background: #FFA500;
					display: inline-block;
					outline: none;
					cursor: pointer;
					text-align: center;
					text-decoration: none;
					border-radius: 5px;
					color: #FAFAD2;
				}
				
				#delBtn {
					width: 50px;
					height: 30px;
					border: none;
					background: #FFA500;
					display: inline-block;
					outline: none;
					cursor: pointer;
					text-align: center;
					text-decoration: none;
					border-radius: 5px;
					color: #FAFAD2;
				}
				
				#jsBtn {
					width: 60px;
					height: 30px;
					display: inline-block;
					outline: none;
					cursor: pointer;
					border: none;
					background: #FFA500;
					text-align: center;
					text-decoration: none;
					border-radius: 5px;
					color: #FAFAD2;
					position: absolute;
					right: 131px;
					bottom: 0;
				}
				
				#money {
					width: 129px;
					height: 26px;
					outline: none;
					background: #fff;
					border: 1px solid #FFA500;
					text-align: center;
					line-height: 26px;
					font-size: 20px;
					color: #808080;
					position: absolute;
					right: 0;
					bottom: 1px;
				}
			</style>

<script type="text/javascript">
			var content = document.getElementsByClassName('content')[0];
			var foot_nav = document.getElementsByClassName('foot_nav')[0];
			//选择框
			var btn = document.getElementsByClassName('btn');
			//内容框
			var nr = document.getElementsByClassName('nr');
			//件数
			var txt = document.getElementsByClassName('txt');
			//减
			var cut = document.getElementsByClassName('cut');
			//加
			var add = document.getElementsByClassName('add');
			//删除
			var del = document.getElementsByClassName('del');
			//总价
			var zj = document.getElementsByClassName('zj');
			//结算
			var money = document.getElementById('money');
			//
			var allBtn = document.getElementById('allBtn');
			var noBtn = document.getElementById('noBtn');
			var jsBtn = document.getElementById('jsBtn');
			var addBtn = document.getElementById('addBtn');
			var delBtn = document.getElementById('delBtn');
			//添加
			addBtn.onclick = function() {
				createNewNr();
				Array.prototype.slice.call(nr).forEach(function(v, i) {
					//删除
					
					del[i].onclick = function() {
//						for(var i = 0; i < btn.length; i++) {
//							if(btn[i].checked == true) {
//								nr[i].style.display = 'none';
//							}
//							if(btn[i].checked == false){
//								nr[i].style.display = 'block';
//							}
//						}
						btn[i].checked = false;
//						nr[i].style.display = 'none';
						nr[i].remove();

					}
					//加
					add[i].onclick = function() {
						txt[i].value++;
						zj[i].value = 3500 * txt[i].value;
					}

					//减
					cut[i].onclick = function() {
						if(txt[i].value == 1) {
							txt[i].value = 0;
						}
						if(txt[i].value > 1) {
							txt[i].value--;
						}
						zj[i].value = 3500 * txt[i].value;
					}

				})
			}
			//删除
			del[0].onclick = function() {
				for(var i = 0; i < btn.length; i++) {
					if(btn[i].checked == true) {
//						nr[0].style.display = 'none';
						nr[0].remove();
					}
				}

			}
			//加
			add[0].onclick = function() {
				txt[0].value++;
				zj[0].value = 3500 * txt[0].value;
			}
			//减
			cut[0].onclick = function() {
				if(txt[0].value == 1) {
					txt[0].value = 0;
				}
				if(txt[0].value > 1) {
					txt[0].value--;
				}
				zj[0].value = 3500 * txt[0].value;
			}
			//全选框
			allBtn.onclick = function() {
				for(var i = 0; i < btn.length; i++) {
					btn[i].checked = true;
				}
			}
			//全不选
			noBtn.onclick = function() {
				for(var i = 0; i < btn.length; i++) {
					btn[i].checked = false;
				}
			}
			//删除
			delBtn.onclick = function() {
				for(var i = 0; i < btn.length; i++) {
					if(btn[i].checked) {
//						nr[i].style.display = 'none';
						nr[i].remove();
					}
				}
			}
			//总价
			jsBtn.onclick = function() {
				var num = 0;
				for(var i = 0; i < nr.length; i++) {
					if(btn[i].checked) {
						num = num + Number(zj[i].value);
					}
				}
				money.value = Number(num);
			}

			//添加函数
			var createNewNr = function() {
				var msg = '';
				var nr = document.getElementsByClassName('nr')[0];
				var content = document.getElementsByClassName('content')[0];
				var div = document.createElement('div');
				div.setAttribute('class', 'nr');
				msg = '<input type="checkbox" name="" id="btn" value="" class="btn" />' +
					'<img src="img/comput.jpg" />' +
					'<p class="dn">笔记本电脑</p>' +
					'<p class="jg">￥3500</p>' +
					'<button class="price cut">&nbsp;&nbsp;-&nbsp;&nbsp;</button>' +
					'<input type="text" name="" id="txt" value="1" class="txt" disabled="disabled" />' +
					'<button class="price add">&nbsp;&nbsp;+&nbsp;&nbsp;</button>' +
					'<input type="text" name="zj" id="zj" value="3500" disabled="disabled" class="zj" />' +
					'<p class="del">删除</p>';
				div.innerHTML = msg;
				content.appendChild(div, null);
			}
		</script>