In our usual development, we sometimes need to get the value of the check box and all the information for the check box to select the row. There's a trick at this point where we can put all the information we want into the check box value, so that we can get the check box to select the value, which is equivalent to getting the current line of information.
Select All:
var bischecked=$ (' #cboxchecked '). Is (': checked ');
var fruit=$ (' input[name= ' orders "]);
Fruit.prop (' checked ', bischecked);
Why use prop instead of attr here because
For the intrinsic properties of the HTML element itself, the prop method is used when processing.
For our own custom DOM attributes for HTML elements, the attr method is used when processing.
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 manipulate the DOM, we just have to care about the state of the value;
First 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>{{selected|json}}</pre> <pre>{{selectedTags|json}}</pre> </body> </html>
Line2 defines the Angularjs App;
Line4 introduces the Angularjs script;
Line5 introduces its own written script2.js script;
LINE7 Specifies the controller Addstylectrl
Line13-15 real-time display of selected labels to the user to see;
Line17-line26 uses a double loop to list the data in the database (in this case it is stored in an object in controller);
Line21 This line of code can be large: <inputtype= "checkbox" Id={{tag.id}}name= "{{tag.name}}" ng-checked= "isselected (tag.id)" ng-click= "Updateselection ($event, tag.id)" >
Store the tag of the Id,name, using isselected (tag.id) to determine whether to be checked, click on the call Updateselection ($event, tag.id) method;
If you want to ng-click the triggering function, the element that triggers the function cannot be passed in directly to this, and you need to pass in the event. Because in Angularjs, this place is scope. We can pass in the event and then get the element through Event.target in the function.
LINE29-30 is the test time to see for themselves, you can see the selected array and selectedtags array of content;
Then 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?'add':'remove');
updateSelected(action,id,checkbox.name);
}
$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
});
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
