Home >Web Front-end >JS Tutorial >Summary of methods for getting the value selected in the check box using Jquery and angularjs_jquery

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

WBOYOriginal: 2016-05-16 15:19:301969browse

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:

b6c5a531a458a2e790c1fd6421739d1ce00b31f935151e80cc907b07ca8efbb1b90dd5946f0946207856a8a37f441edf 

Select all and select none:

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

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Getting started with the basic usage of jquery validate form validation_jqueryNext article：Getting started with the basic usage of jquery validate form validation_jquery

See more

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

Related articles