JQuery全选Prop(“check”,true)和attr("attr",true)区别
2016-12-23 17:49
417 查看
$scope.selectAll = false; //点击单选框的时候是不是全选 $scope.checkIsAll = function(){ var wipeCheckBoxObj = $("input[name='wipeCheckBox']:checked"); if(wipeCheckBoxObj.length==$scope.dataLists.length){ //全选 $scope.selectAll = true; }else{ $scope.selectAll = false; } } //全选、取消全选 $scope.checkAllBox = function(selectAll){ var wipeCheckBoxObj = $("input[name='wipeCheckBox']"); if(selectAll){ wipeCheckBoxObj.prop("checked",true); /**最好不要用下面这个,因为这样会用问题!!!最开是的时候以为是jquery--1.6版本没有attr属性,只能用prop(), 但是我换了高版本的jQuery有时候还是会出现问题,具体问题还不是很清楚,所以最好还是用prop这个属性吧*/ //wipeCheckBoxObj.attr("checked",true); }else{ wipeCheckBoxObj.attr("checked",false); } }
//删除全部选中的数据 $scope.deleteAllSelectedDate = function(){ var wipeCheckBoxObj = $("input[name='wipeCheckBox']:checked"); if(!wipeCheckBoxObj||wipeCheckBoxObj.length==0){ return ; }else{ var finacialValue = ""; //获取选中数据的ID wipeCheckBoxObj.each(function(){ finacialValue += ($(this).val()) + ","; }); //去掉最后一个逗号 finacialValue =finacialValue.substr(0,finacialValue.length-1); $http({ url:'/ecp/financial/deleteAllSelectedWipeData', method:"DELETE", param:{ "selectedWipeDatas":finacialValue } }).success(function(data){ if(data=='true'){ //删除成功之后给提示,并刷新数据!!! var objDiv = "objDiv"; startObjMessage(objDiv); $scope.getAllAddedWipeoutData(); } }).error(function(data){ console.log("operateWipeoutCtrl批量删除数据失败!!!!"); }); } }
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-1" style="text-align: center">
<!--这里用ng-change比用ng-click要好!!!!!!!!!!ng-click触发了可能selectAll的值还没变,但是ng-change一定是selectAll的值改变了才会执行!!!!!!!-->
<input type="checkbox" ng-model="selectAll" ng-change="checkAllBox(selectAll)">全选</th>
<th class="col-md-1" style="text-align: center">单 号</th>
<th class="col-md-1" style="text-align: center">报 销 人</th>
<th class="col-md-2" style="text-align: center">类目(用途)</th>
<th class="col-md-2" style="text-align: center">项 目</th>
<th class="col-md-2" style="text-align: center">金 额(元)</th>
<!--<th class="col-md-1" style="text-align: center">类 型</th>-->
<th class="col-md-1" style="text-align: center">时 间</th>
<th class="col-md-2" style="text-align: center">操 作</th>
</tr>
</thead>
<tbody>
<tr ng-model="topics" ng-repeat="item in dataLists">
<td class="col-md-1" style="text-align: center"><input type="checkbox" ng-click="checkIsAll()" value="{{item.id}}" name="wipeCheckBox"></td>
<td class="col-md-1" style="text-align: center"><span class="mr-badge red-bg">{{item.orderNumber}}</span></td>
<td class="col-md-1" style="text-align: center"><span>{{item.reimbursement}}</span></td>
<td class="col-md-2" style="text-align: center"><span title="{{item.category}}">{{item.category}}</span></td>
<td class="col-md-2" style="text-align: center"><span ng-bind="item.project"></span></td>
<td class="col-md-2" style="text-align: center"><span ng-bind="item.money"></span></td>
<!--<td class="col-md-1" style="text-align: center"><span ng-bind="item.type"></span></td>-->
<td class="col-md-1" style="text-align: center"><span ng-bind="item.createdOn"></span></td>
<td class="col-md-2" style="text-align: center"><button class="btn btn-danger btn-xs" ng-click="deleteData(item.id,'objDiv')">删除</button>
| <button class="btn btn-success btn-xs" ng-click="openPop(item)">编辑</button></td>
</tr>
<tr ng-if="dataLists.length==0||dataLists==''">
<td class="col-md-2">暂无数据</td>
</tr></tbody>
</table>
相关文章推荐
- 新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败attr与prop区别
- jquery中attr和prop的区别+jquery实现全选全不选
- jQuery .attr() .prop() .data()区别及全选等问题
- 在jquery用一个按钮实现全选/全不选的效果(attr和prop的区别使用)
- jQuery .attr() .prop() .data()区别及全选等问题
- Jquery 获取Checkbox值,prop 和 attr 函数区别
- jquery中attr和prop的区别
- jquery中prop()方法和attr()方法的区别浅析
- jQuery学习之prop和attr的区别
- JQuery BUG : $.attr("selected",true)
- jQuery中attr和prop方法的区别
- jquery prop方法和attr方法区别
- jquery中prop()方法和attr()方法的区别
- jquery中prop()方法和attr()方法的区别
- jquery中prop和attr的区别有哪些
- jquery中prop()方法和attr()方法的区别
- jquery中prop()方法和attr()方法的区别
- jQuery学习之prop和attr的区别示例介绍
- jQuery学习之prop和attr的区别示例介绍