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

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

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在我們平常的開發中，有時候會需要擷取一下check框選中的值，以及check框選中行的所有資訊。這個時候有一個小技巧那就是我們可以把要擷取的資訊全部放到check框的值裡面，這樣我們可以擷取check框選中值的時候也就相當於擷取了當前行的資訊。

複製代碼代碼如下:

全選全不選：

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;   } });

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More