Jquery和angularjs獲取check框選中的值小技巧 · JS重塑學習

在我們平常的開發中，有時候會需要獲取一下check框選中的值，以及check框選中行的所有信息。這個時候有一個小技巧那就是我們可以把要獲取的信息全部放到check框的值里面，這樣我們可以獲取check框選中值的時候也就相當于獲取了當前行的信息。 ~~~ <td> <input class="states" type="checkbox" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/> </td> ~~~ **全選全不選：** ~~~ var bischecked=$('#cboxchecked').is(':checked'); var fruit=$('input[name="orders"]'); fruit.prop('checked',bischecked); ~~~ 這里為什么要用prop而不用attr,這是因為 - 對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。 - 對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。 **獲取選中的值:** ~~~ $('input[name="orders"]:checked').each(function(){ var sfruit=$(this).val(); var orders=sfruit.split(","); var reminder=new Object(); reminder.merchantId=orders[0]; reminder.orderCode=orders[1]; reminder.userId=orders[2]; }); ~~~ **angularjs實現:** 使用angularjs我們不用去操作dom,我們只需要去關心這個值的狀態; 首先看一下html代碼： ~~~ <!DOCTYPE html> <html data-ng-app="App"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="script2.js"></script> </head> <body data-ng-controller="AddStyleCtrl"> <div>Choose Tags</div> <div> <div>You have choosen:</div> <hr> <label data-ng-repeat="selectedTag in selectedTags"> (({{selectedTag}})) </label> <hr> <div data-ng-repeat="category in tagcategories"> <div>{{ category.name }}</div> <div data-ng-repeat="tag in category.tags"> <div> <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)"> {{ tag.name }} </div> </div> <hr> </div> </div> <pre>{{selected|json}}</pre> <pre>{{selectedTags|json}}</pre> </body> </html> ~~~ line2 定義了AngularJS App； line4 引入angularjs腳本； line5 引入自己寫的script2.js腳本； line7 指定控制器AddStyleCtrl line13-15 實時顯示已選標簽給用戶看； line17-line26 使用雙重循環列出數據庫（本例中就存儲在了controller的一個對象里）中的數據； line21的這行代碼作用可大了：<inputtype="checkbox" id={{tag.id}}name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)"> 存儲了tag的id，name，利用isSelected(tag.id)來判斷是否被checked，點擊時候調用updateSelection($event,tag.id)方法；如果想 ng-click 觸發的函數里獲取到該觸發該函數的元素不能直接傳入 this ，而需要傳入event。因為在Angularjs里面，這個地方的this是?scope 。我們可以傳入 event，然后在函數里面通過?event.target 來獲取到該元素。 line29-30 是測試時候給自己看的，可以看到selected數組和selectedTags數組中的內容；然后看看AngularJS代碼：（script2.js） ~~~ /** * Created by zh on 20/05/15. */ // Code goes here var iApp = angular.module("App", []); iApp.controller('AddStyleCtrl', function($scope) { $scope.tagcategories = [ { id: 1, name: 'Color', tags: [ { id:1, name:'color1' }, { id:2, name:'color2' }, { id:3, name:'color3' }, { id:4, name:'color4' }, ] }, { id:2, name:'Cat', tags:[ { id:5, name:'cat1' }, { id:6, name:'cat2' }, ] }, { id:3, name:'Scenario', tags:[ { id:7, name:'Home' }, { id:8, name:'Work' }, ] } ]; $scope.selected = []; $scope.selectedTags = []; var updateSelected = function(action,id,name){ if(action == 'add' && $scope.selected.indexOf(id) == -1){ $scope.selected.push(id); $scope.selectedTags.push(name); } if(action == 'remove' && $scope.selected.indexOf(id)!=-1){ var idx = $scope.selected.indexOf(id); $scope.selected.splice(idx,1); $scope.selectedTags.splice(idx,1); } } $scope.updateSelection = function($event, id){ var checkbox = $event.target; var action = (checkbox.checked?'add':'remove'); updateSelected(action,id,checkbox.name); } $scope.isSelected = function(id){ return $scope.selected.indexOf(id)>=0; } }); ~~~