全选---反选---删除---HTML

来源：互联网发布：mac修改器 win7 编辑：程序博客网时间：2024/05/16 08:41

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
</head>

<body ng-app="mApp" ng-controller="mCtrl">
<button ng-click="invert()">反选</button>
<button ng-click="batch()">批量删除</button>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td>全选/全不选<input type="checkbox" ng-click="selectAll()" id="maxChe" /></td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>

<tr ng-repeat="good in goods">
<td><input type="checkbox" class="che" ng-click="item($index)" /></td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
<td>{{good.price*good.count}}</td>
<td>
<a href="#" ng-click="del($index)">删除</a>
</td>
</tr>

</table>

<script>
//页面加载时将"全选"的复选框设为未选中,为了刷新时重置
$(function() {
document.getElementById("maxChe").checked = false
})

//初始化模块
var mm = angular.module("mApp", [])

// 初始化控制器
mm.controller("mCtrl", function($scope) {

// 声明数组
$scope.goods = [

// 填充数组
{
"name": "苹果1",
"price": 20,
"count": 10
},
{
"name": "香蕉",
"price": 15,
"count": 10
},
{
"name": "梨子",
"price": 30,
"count": 10
},
{
"name": "橘子",
"price": 10,
"count": 10
},
{
"name": "甘蔗",
"price": 18,
"count": 10
},
]

// 通过数组下标删除数组中元素
$scope.del = function($index) {
$scope.goods.splice($index, 1)
}

// 全选/全不选
$scope.selectAll = function() {
//获取所有class为che的元素返回一个数组
var checkboxs = $(".che")
// 获取全选框的状态
var flag = document.getElementById("maxChe").checked
// 遍历数组
for(var i = 0; i < checkboxs.length; i++) {
// 将全选框的状态赋值给所有复选框
checkboxs[i].checked = flag
}
}

// 批量删除
$scope.batch = function() {
// 获取所有class为che的元素返回一个数组
var checkboxs = $(".che")
// 反向遍历删除元素正向遍历需要使用递归目的:来解决js数组元素被移除后,下标向前顶的问题
for(var i = checkboxs.length - 1; i > -1; i--) {
// 将选中的复选框删除
if(checkboxs[i].checked) {
$scope.goods.splice(i, 1);
}
}
}

// 复选框的点击事件目的:两个功能
$scope.item = function($index) {
// 点击时改变当前选中的状态
$scope.goods[$index].cd = !$scope.goods[$index].cd
var f = true;
var checkboxs = $(".che")
// 判断是否选中了全部的复选框
for(var i = 0; i < checkboxs.length; i++) {
if(!checkboxs[i].checked) { // 有一个没选就将全选的复选框设置为false
f = false
// 终止循环
i = checkboxs.length
}
}
// 设置是否全选
$("#maxChe").prop({checked:f})
}

// 反选
$scope.invert = function() {
var f = true;
var checkboxs = $(".che")
for(var i = 0; i < checkboxs.length; i++) {

// 改变原有的状态 true为false false为true
checkboxs[i].checked = !checkboxs[i].checked

// 通过遍历复选框获并取其状态判断是否全选
if(!checkboxs[i].checked) {
f = false
}
}

// 设置是否全选
$("#maxChe").prop("checked",f)
}
})
</script>
</body>

</html>

阅读全文

0 0