<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.layui-form input[type=checkbox] {
display: block
}
.inp {
15px;
height: 15px;
cursor: pointer;
margin: 0 auto;
}
.inp2 {
text-align: center;
}
.moneybtn {
height: 25px;
25px;
cursor: pointer;
}
.money {
display: inline-block;
30px;
text-align: center;
}
</style>
</head>
<body>
<div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th>
<input class="inp" type="checkbox" name="" value="" id="all"/>
</th>
<th>名称</th>
<th>单价</th>
<th>付款价格</th>
<th>IP</th>
<th>结束时间</th>
<th>月数</th>
</tr>
</thead>
<tbody class="all-son1">
<tr class="parent">
<td>
<input class="inp all-son" type="checkbox" name="vehicle" value=""/>
</td>
<td>贤心</td>
<td>
<span class="dj">100</span>
</td>
<td class="price">200</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button class="moneybtn add ">+</button>
<input type="text" class="money" value="1">
<button class="moneybtn reduce">-</button>
</td>
</tr>
<tr class="parent">
<td>
<input class="inp all-son" type="checkbox" name="vehicle" value=""/>
</td>
<td>张爱玲</td>
<td class="">
<span class="dj">21100</span>
</td>
<td class="price">2200</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>
<button class="moneybtn add ">+</button>
<input type="text" class="money" value="1">
<button class="moneybtn reduce">-</button>
</td>
</tr>
<tr class="parent">
<td>
<input class="inp all-son" type="checkbox" name="vehicle" value=""/>
</td>
<td>张爱玲</td>
<td class="">
<span class="dj">21100</span>
</td>
<td class="price">2200</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>
<button class="moneybtn add ">+</button>
<input type="text" class="money" value="1">
<button class="moneybtn reduce">-</button>
</td>
</tr>
<tr>
<td>
<div class="inp2">合计</div>
</td>
<td></td>
<td></td>
<td id="price">0</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./lib/jquery/jquery.2.24.js"></script>
<script>
$(function () {
$("#all").click(function () {
if (this.checked) {
$(".all-son1 :checkbox").prop("checked", true);
} else {
$(".all-son1 :checkbox").prop("checked", false);
}
price();
});
function cheaked() {
var cheaknum = $('.all-son').size();
var xznum = '';
$('.all-son').each(function () {
if ($(this).prop('checked') == true) {
xznum++
}
});
if (cheaknum == xznum) {
$('#all').prop('checked', true);
} else {
$('#all').prop('checked', false);
}
;
};
$(".all-son").click(function () {
cheaked();
price();
});
function data() {
$('.all-son').each(function () {
if ($(this).prop('checked')) {
alert($(this).parent().text());
} else {
return
}
});
};
$('.demo :button').click(function () {
data();
});
//单价与操作的乘积
function fkjg() {
$('.parent').each(function (i, val) {
var fkprice = $(val).find('.dj').text() * $(val).find('.money').val();
console.log($(val).find('.money').val());
$(val).find('.price').text(fkprice);
});
};
fkjg()
//点击勾选的时候计算付款价格
function price() {
var arr = [];
$('.all-son').each(function (i, val) {
if ($(val).is(':checked')) {
arr.push($(val).parents('.parent').find('.price').text() - 0);
}
});
var sum = 0;
function getSum(item) {
sum += item;
}
for (var i = 0; i < arr.length; i++) {
var sum = 0;
arr.some(getSum);
}
console.log(sum);
$('#price').html(sum);
};
//点击加号
$('.add').click(function () {
$(this).next().val(parseInt($(this).next().val()) + 1);
fkjg()
price()
});
//点击减号
$('.reduce').click(function () {
if (parseInt($(this).prev().val()) - 1 <= 0) {
$(this).prev().val(1);
fkjg()
price()
} else {
$(this).prev().val(parseInt($(this).prev().val()) - 1);
fkjg()
price()
}
});
});
</script>
</body>
</html>