Home > Developer > JavaScript
Methods for Jquery and angularjs to obtain the value selected in the check box. jqueryangularjs
In our normal development, we sometimes need to obtain the value selected in the check box and all the information of the row selected in the check box. In this case, we can put all the information we want to obtain into the value of the check box, so that we can obtain the selected value of the check box, which is equivalent to getting the information as before.
Copy codeThe Code is as follows:
<Td> <input class = "states" type = "checkbox" name = "orders" value = "{e. merchantId }}, {e. orderCode }}, {e. userId }}"/> </td>
Select none for all:
var bischecked=$('#cboxchecked').is(':checked'); var fruit=$('input[name="orders"]'); fruit.prop('checked',bischecked);
Why do we use prop instead of attr? This is because
For the inherent attributes of HTML elements, the prop method is used for processing.
For DOM attributes customized by HTML elements, the attr method is used for processing.
Obtain 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:
With angularjs, we don't need to operate dom. We only need to care about the status of this value;
First, let's take a look at the html code:
<!DOCTYPE html>Line2 defines AngularJS App;
Line4 introduces angularjs scripts;
Line5 introduces script2.js scripts written by myself;
Line7 specify the Controller AddStyleCtrl
Line13-15 real-time display of selected labels to the user;
The line17-line26 uses a double loop to list the data in the database (in this example, it is stored in an object of the controller;
This line of line21 code has a greater role: <inputtype = "checkbox" id = {tag. id }}name = "{tag. name} "ng-checked =" isSelected (tag. id) "ng-click =" updateSelection ($ event, tag. id) ">
The id and name of the tag are stored, and isSelected (tag. id) is used to determine whether the tag is being checked. when clicked, The updateSelection ($ event, tag. id) method is called;
If you want to obtain the element that triggers the function from the function triggered by ng-click, you cannot directly input this, but you need to input the event. In Angularjs, this is scope. We can pass in the event and get this element through event.tar get in the function.
Line29-30 is to show yourself when testing, you can see the content in the selected array and selectedTags array;Then look at 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?'add':'remove'); updateSelected(action,id,checkbox.name); } $scope.isSelected = function(id){ return $scope.selected.indexOf(id)>=0; } });Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
