快捷導航

Jquery和angularjs獲取check框選中的值的方法匯總

更新時間：2016年01月17日 16:08:46 投稿：hebedich

本文分別通過具體的實例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法，非常的簡單實用，有需要的小伙伴可以參考下

在我們平常的開發(fā)中，有時候會需要獲取一下check框選中的值，以及check框選中行的所有信息。這個時候有一個小技巧那就是我們可以把要獲取的信息全部放到check框的值里面，這樣我們可以獲取check框選中值的時候也就相當于獲取了當前行的信息。

復(fù)制代碼代碼如下:

<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實現(xiàn):

使用angularjs我們不用去操作dom,我們只需要去關(guān)心這個值的狀態(tài);
首先看一下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 使用雙重循環(huán)列出數(shù)據(jù)庫（本例中就存儲在了controller的一個對象里）中的數(shù)據(jù)；
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，點擊時候調(diào)用updateSelection($event,tag.id)方法；
　　如果想 ng-click 觸發(fā)的函數(shù)里獲取到該觸發(fā)該函數(shù)的元素不能直接傳入 this ，而需要傳入event。因為在Angularjs里面，這個地方的this是 scope 。我們可以傳入 event，然后在函數(shù)里面通過 event.target 來獲取到該元素。
line29-30 是測試時候給自己看的，可以看到selected數(shù)組和selectedTags數(shù)組中的內(nèi)容；

然后看看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; 
  } 
});

您可能感興趣的文章: