huaxia/htmls/logshoppingcar/shopcar.html

161 lines
7.8 KiB
HTML
Raw Normal View History

2021-09-07 01:43:08 +00:00
<!DOCTYPE html>
<html lang="en">
2021-09-07 09:48:02 +00:00
2021-09-07 01:43:08 +00:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
2021-09-07 09:48:02 +00:00
<link rel="stylesheet" href="../../css/layui.css">
<link rel="stylesheet" href="../../css/logshoppingcar/shopcar.css">
2021-09-07 01:43:08 +00:00
</head>
2021-09-07 09:48:02 +00:00
2021-09-07 01:43:08 +00:00
<body>
2021-09-07 09:48:02 +00:00
<section>
<div class="whole">
<div class="whole-1">
<div class="all">
<h2>全部商品(20)</h2>
</div>
<!-- 选择 -->
<div class="opt">
<ul>
<li class="optall">
<table>
<th> <input type="checkbox" id="checkall">
<label for="value1">全选</label>
<span>商品</span>
</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</table>
</li>
</ul>
<ul id="checklist">
<li class="among">
<table>
<th> <input type="checkbox" name="arr[]" value="1" class="box1">
<label for="value1"><img src="../../img/images/1-1.png" alt=""></label>
</th>
<th><span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
</span></th>
<th>x3</th>
<th>¥1888.00</th>
<th>
<input type="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(0);">
</th>
<th id="price0">¥564.6</th>
<th onclick="del(1)">删除</th>
</table>
</li>
<li class="among">
<table>
<th> <input type="checkbox" name="arr[]" value="2" class="box1">
<label for="value1"><img src="../../img/images/1-2.png" alt=""></label>
</th>
<th><span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
</span></th>
<th>x3</th>
<th>¥1888.00</th>
<th>
<input type="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(0);">
</th>
<th id="price0">¥564.6</th>
<th onclick="del(1)">删除</th>
</table>
</li>
<li class="among">
<table>
<th> <input type="checkbox" name="arr[]" value="3" class="box1">
<label for="value1"><img src="../../img/images/1-3.png" alt=""></label>
</th>
<th><span>
竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
</span></th>
<th>x3</th>
<th>¥1888.00</th>
<th>
<input type="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(0);">
</th>
<th id="price0">¥564.6</th>
<th onclick="del(1)">删除</th>
</table>
</li>
<li class="among">
<table>
<th> <input type="checkbox" name="arr[]" value="4" class="box1">
<label for="value1"><img src="../../img/images/1-4.png" alt=""></label></th>
<th><span>竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190/span></th>
<th>x3</th>
<th>¥1888.00</th>
<th>
<input type="button" name="minus" value="-" onclick="minus(0);">
<input type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(0);">
</th>
<th id="price0">¥564.6</th>
<th onclick="del(1)">删除</th>
</table>
</li>
</li>
</ul>
</div>
2021-09-07 01:43:08 +00:00
</div>
</div>
2021-09-07 09:48:02 +00:00
2021-09-07 01:43:08 +00:00
</section>
</body>
2021-09-07 09:48:02 +00:00
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
/*全选按钮状态显示判断*/
$(".checklist").find("input[type='checkbox']").click(function () {
/*初始化选择为TURE*/
$(".checkall")[0].checked = true;
/*获取未选中的*/
var nocheckedList = new Array();
$(".checklist").find('input:not(:checked)').each(function () {
nocheckedList.push($(this).val());
});
/*状态显示*/
if (nocheckedList.length == $(".checklist").find('input').length) {
$(".checkall")[0].checked = false;
$(".checkall")[0].indeterminate = false;
} else if (nocheckedList.length) {
$(".checkall")[0].indeterminate = true;
} else {
$(".checkall")[0].indeterminate = false;
}
});
// 全选/取消
$(".checkall").click(function () {
// alert(this.checked);
if ($(this).is(':checked')) {
$(".checklist").find('input').each(function () {
$(this).prop("checked", true);
});
} else {
$(".checklist").find('input').each(function () {
$(this).removeAttr("checked", false);
$(this).prop("checked", false); // 根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
});
}
});
});
</script>
2021-09-07 01:43:08 +00:00
</html>