Jqueryとangularjs checkボックスで選択した値を取得するテクニック

6175 ワード

通常の開発では、checkボックスで選択した値と、checkボックスで選択した行のすべての情報を取得する必要がある場合があります.このとき、取得する情報をすべてcheckボックスの値に入れることで、checkボックスの選択値を取得できるようにすると、現在の行の情報を取得することになります.
選択したかどうかを判断する

$("input[type='checkbox']").is(':checked')

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

ここでattrを使わずにpropを使うのはなぜですか.

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コードを見てみましょう.

1 <!DOCTYPE html>
 2 <html data-ng-app="App">
 3 <head>
 4     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 5     <script src="script2.js"></script>
 6 </head>
 7 <body data-ng-controller="AddStyleCtrl">
 8 
 9     <div>Choose Tags</div>    
10     <div>
11         <div>You have choosen:</div>
12         <hr>
13         <label data-ng-repeat="selectedTag in selectedTags">
14             (({{selectedTag}}))
15         </label>
16         <hr>
17         <div data-ng-repeat="category in tagcategories">
18             <div>{{ category.name }}</div>
19             <div data-ng-repeat="tag in category.tags">
20                 <div>
21                     <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
22                     {{ tag.name }}
23                 </div>
24             </div>
25             <hr>
26         </div>
27     </div>
28 
29 <pre>{{selected|json}}</pre>
30 <pre>{{selectedTags|json}}</pre>
31 
32 </body>
33 </html>

Line 2はAngularJS Appを定義した.
line 4はangularjsスクリプトを導入します.
line 5は自分で書いたscript 2を導入する.jsスクリプト;
line 7コントローラAddStyleCtrlの指定
line 13-15は、選択したラベルをリアルタイムでユーザーに表示します.
line 17-line 26は、二重ループを使用してデータベース(この例ではcontrollerのオブジェクトに格納されている)のデータをリストします.
line 21のこの行のコードの作用は大きくなりました:
tagのid,nameが格納され、isSelected(tag.id)を用いてcheckedされたか否かを判断し、クリック時にupdateSelection($event,tag.id)メソッドを呼び出す.
ng-clickがトリガした関数でこの関数をトリガした要素を取得するには、thisに直接転送することはできません.eventを転送する必要があります.Angularjsの中にあるので、この場所のthisはscopeです.eventに転送し、関数の中でeventを通過することができます.targetを使用して要素を取得します.
line 29-30はテスト時に自分に見せたもので、selected配列とselectedTags配列の内容が見えます.
次にAngularJSコードを見てみましょう:(script 2.js)

1 /**
 2  * Created by zh on 20/05/15.
 3  */
 4 // Code goes here
 5 
 6 var iApp = angular.module("App", []);
 7 
 8 
 9 
10 iApp.controller('AddStyleCtrl', function($scope)
11 {
12     $scope.tagcategories = [
13         {
14             id: 1,
15             name: 'Color',
16             tags: [
17                 {
18                     id:1,
19                     name:'color1'
20                 },
21                 {
22                     id:2,
23                     name:'color2'
24                 },
25                 {
26                     id:3,
27                     name:'color3'
28                 },
29                 {
30                     id:4,
31                     name:'color4'
32                 },
33             ]
34         },
35         {
36             id:2,
37             name:'Cat',
38             tags:[
39                 {
40                     id:5,
41                     name:'cat1'
42                 },
43                 {
44                     id:6,
45                     name:'cat2'
46                 },
47             ]
48         },
49         {
50             id:3,
51             name:'Scenario',
52             tags:[
53                 {
54                     id:7,
55                     name:'Home'
56                 },
57                 {
58                     id:8,
59                     name:'Work'
60                 },
61             ]
62         }
63     ];
64 
65     $scope.selected = [];
66     $scope.selectedTags = [];
67 
68     var updateSelected = function(action,id,name){
69         if(action == 'add' && $scope.selected.indexOf(id) == -1){
70             $scope.selected.push(id);
71             $scope.selectedTags.push(name);
72         }
73         if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
74             var idx = $scope.selected.indexOf(id);
75             $scope.selected.splice(idx,1);
76             $scope.selectedTags.splice(idx,1);
77         }
78     }
79 
80     $scope.updateSelection = function($event, id){
81         var checkbox = $event.target;
82         var action = (checkbox.checked?'add':'remove');
83         updateSelected(action,id,checkbox.name);
84     }
85 
86     $scope.isSelected = function(id){
87         return $scope.selected.indexOf(id)>=0;
88     }
89 });

OpenCV深い学習(2)-マット構造初期化など

jQuery遍歴-フィルタリング