勾选列表数据
效果:
代码:
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;}}