Jquery和angularjs获取check框选中的值小技巧

女爷i 2022-08-19 13:22 126阅读 0赞

在我们平常的开发中，有时候会需要获取一下check框选中的值，以及check框选中行的所有信息。这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面，这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息。

**判断是否选中**

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

**全选按钮 **

**全选全不选：**

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代码：

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>

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）

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

**点击行的时候选中check框:  
先再行上添加一个点击事件，把这个行个传到后台：**

ng-click="checkTr(this)"

接着给当前单元格的check框赋值;

$scope.checkTr=function(tr){
    		$scope.check=tr.e.docGuid;
    	};

## 自定义复选框对应的值 ##

默认情况下，绑定到复选框上的值是ture或者false。有时候，我们希望返回的其它值。Angular提供了一种非常好的处理方式：使用ng-ture-value和ng-false-value。

我们添加另外一组复选框，不过这时侯我们使用的不再是true或者false，而是用户自定义的值。

<label>Personal Question</label>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
            Are you awesome?
        </label>
    </div>

Angularjs全选全不选：

自己经过长时间的实践，总结出了一套自己使用Angularjs全选全不选的方式;

<table id="cartTable">  
            <thead>  
                <tr>  
                    <th><label><input class="check-all check" type="checkbox" ng-click="checkAll()" ng-model="all"/> 全选</label></th>  
                    <th>商品</th>  
                    <th>单价</th>  
                    <th>数量</th>  
                    <th>小计</th>  
                    <th>操作</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr ng-repeat="c in cartList">  
                    <td class="checkbox"><input class="check-one check" type="checkbox" ng-model="c.check" /></td>  
                    <td class="goods"><img src="{
        {c.image}}" alt=""/><span>{
        {c.name}}</span></td>  
                    <td class="price">{
        {c.price}}</td>  
                    <td class="count"><span class="reduce">-</span><input class="count-input" type="text"  ng-model="c.num"/><span class="add">+</span></td>  
                    <td class="subtotal">{
        {c.total}}</td>  
                    <td class="operation"><span class="delete">删除</span></td>  
                </tr>  
            </tbody>  
        </table>

我们会在列表的List对象里面添加一个check的参数，该参数默认是false，然后我们的check框model也取check的值，所以最开始的时候页面都是全不选的状态。当我点击全选全不选的时候就去调用checkAll方法，该方法会去循环的给集合赋值，$scope.all就是我们页面选择全选反选的状态，对应的集合值发生了变化，所以页面的选择状态也会发送变化。如果要取选择的值的话，直接去遍历集合cartList，然后判断一下check状态就可以了。非常简单适用。