勾选列表数据
效果:
代码:
html:
<tr>
<th style="width:40px">
<label class="ch_label">
<input ng-model="select_all_resource" ng-change="selectAllResource()" type="checkbox" class="ch_all" />
</label>
</th>
<th style="width:20%">名称
<div class="resize"></div>
</th>
</tr>
<tr ng-repeat='item in courseList' ng-click="show_side(item)">
<td ng-click="$event.stopPropagation();">
<label class="ch_label">
<input ng-model="item.checked" ng-change="selectOneResource()" type="checkbox" class="ch_item" />
</label>
</td>
<td class="f_color {[item.is_import_color]}">
<span style="position: relative;">
{[item.name]}
</span>
</td>
</tr>
js:
方式1:angular
// checkbox主资源列表
$scope.checked_resource = [];
$scope.selectAllResource = function () {
if ($scope.select_all_resource) {
$scope.checked_resource = [];
angular.forEach($scope.resourceList, function (item) {//$scope.resourceList 代表列表数据
item.checked = true;
$scope.checked_resource.push(item.id);
})
} else {
angular.forEach($scope.resourceList, function (item) {
item.checked = false;
$scope.checked_resource = [];
})
}
}
$scope.selectOneResource = function () {
angular.forEach($scope.resourceList, function (item) {//$scope.resourceList 代表列表数据
var index = $scope.checked_resource.indexOf(item.id);
if (item.checked && index === -1) {
$scope.checked_resource.push(item.id);
} else if (!item.checked && index !== -1) {
$scope.checked_resource.splice(index, 1);
};
})
if ($scope.resourceList.length === $scope.checked_resource.length) {
$scope.select_all_resource = true;
} else {
$scope.select_all_resource = false;
}
}
方式二 jquery
$scope.select_row = [];
$scope.sel_user_all = function() {
$scope.select_row = [];
var check_all = $("#check_all")
if (check_all.is(":checked")) {
$(".check_item").prop("checked", true)
} else {
$(".check_item").prop("checked", false)
}
var item_tds = $(".check_item:checked");
for (var n = 0; n < item_tds.length; n++) {
$scope.select_row.push(item_tds.eq(n).val())
}
}
$scope.sel_user_one = function() {
$scope.select_row = [];
var item_tds = $(".check_item:checked");
for (var n = 0; n < item_tds.length; n++) {
$scope.select_row.push(item_tds.eq(n).val())
}
var $select_arr_l = $scope.select_row.length;
var $all_arr_l = $scope.all_user_data.length;
if ($select_arr_l == $all_arr_l) {
$scope.couAll = true;
} else {
$scope.couAll = false;
}
}