Summary of methods for getting the value selected in the check box using Jquery and angularjs

Summary of methods for getting the value selected in the check box using Jquery and angularjs_jquery

WBOY

Release： 2016-05-16 15:19:30

Original

1968 people have browsed it

In our usual development, sometimes we need to obtain the value selected in the check box and all the information about the row selected in the check box. A little trick at this time is that we can put all the information we want to obtain into the value of the check box. In this way, when we can obtain the selected value of the check box, it is equivalent to obtaining the information of the current row.

Copy code The code is as follows:

Select all and select none:

var bischecked=$('#cboxchecked').is(':checked'); 
    var fruit=$('input[name="orders"]'); 
    fruit.prop('checked',bischecked);

Copy after login

Why do we use prop instead of attr here? This is because

For the inherent attributes of the HTML element itself, use the prop method when processing.
For our own custom DOM attributes of HTML elements, when processing, use the attr method.
Get the selected value:

$('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]; 
  
      });

Copy after login

angularjs implementation:

Using angularjs we don’t have to operate the dom, we only need to care about the status of this value;
First take a look at the html code:

<!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 class="brush:php;toolbar:false">{{selected|json}}

{{selectedTags|json}}

Copy after login

line2 defines AngularJS App;
line4 introduces angularjs script;
line5 introduces the script2.js script written by myself;
line7 specifies the controller AddStyleCtrl
line13-15 displays the selected tags to the user in real time;
line17-line26 uses a double loop to list the data in the database (in this case, it is stored in an object of the controller);
This line of code in line21 is very useful:
The id and name of the tag are stored, and isSelected(tag.id) is used to determine whether it is checked. When clicked, the updateSelection($event,tag.id) method is called;
If you want to get the element that triggered the function in the function triggered by ng-click, you cannot directly pass in this, but you need to pass in event. Because in Angularjs, this in this place is scope. We can pass in event, and then use event.target to get the element in the function.
Line29-30 is for myself to see during testing. You can see the contents of the selected array and selectedTags array;

Then take a look at the AngularJS code: (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&#63;'add':'remove'); 
    updateSelected(action,id,checkbox.name); 
  } 
 
  $scope.isSelected = function(id){ 
    return $scope.selected.indexOf(id)>=0; 
  } 
});

Copy after login