{"id":54,"date":"2018-08-18T03:11:00","date_gmt":"2018-08-18T03:11:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/08\/18\/how-to-get-selected-checkboxes-using-angularjs\/"},"modified":"2020-08-22T14:04:51","modified_gmt":"2020-08-22T12:04:51","slug":"how-to-get-selected-checkboxes-using-angularjs","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-get-selected-checkboxes-using-angularjs\/","title":{"rendered":"How to Get Selected CheckBoxes Using AngularJs"},"content":{"rendered":"

In this blog, I would teach you two ways to get a list of selelected checkboxes using AngularJS with the click on a button. In another blog we would explain how to perform an action when a checkbox is checked (ng-change or ng-click event).<\/p>\n

 <\/p>\n

<\/div>\n

HTML<\/b>
\nFor the two methods, the html code remains the same as below:<\/p>\n

 <\/p>\n

<div<\/span> ng-repeat=<\/span>\"row in Skills\"<\/span> ><\/span>\r\n <label><\/span>\r\n   <input<\/span> type=<\/span>\"checkbox\"<\/span> ng-model=<\/span>\"row.selected\"<\/span> ><\/span>\r\n   <span><\/span> {{row.Skill}} <\/span><\/span>\r\n<\/label><\/span>\r\n<\/div><\/span>\r\n<button<\/span> ng-click=<\/span>\"GetSelected()\"<\/span>><\/span>Get Selected<\/button><\/span>\r\n<\/pre>\n
 <\/p>\n
AngularJS (Script 1)<\/b><\/p>\n
<\/p>\n
$scope.selected =<\/span> {};\r\n$scope.DeleteSelected=<\/span>function<\/span> () {               \r\n        angular.forEach($scope.selected, function<\/span>(value, key) {\r\n console.log(key);\r\n console.log(value);   \r\n });\r\n};\r\n<\/pre>\n
 <\/p>\n
AngularJS (Script 2)<\/b>
\n<\/p>\n
 <\/p>\n
<\/p>\n
$scope.GetSelected=<\/span>function<\/span>() {       \r\n   var<\/span> selected =<\/span> [];\r\n   angular.forEach($scope.Skills, function<\/span>(row) {\r\n   if<\/span> (row.selected) {          \r\n  console.log(row.ID);\r\n  console.log(row.Skill);\r\n   }\r\n   });\r\n}\r\n<\/pre>\n
 <\/p>\n
Both methods have been tested by me and works very fine. You could reach me by comment below if you have any challenge using the code.<\/p>\n
 <\/p>\n
Thanks for learning.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, I would teach you two ways to get a list of selelected checkboxes using AngularJS with the click on a button. In … <\/p>\n","protected":false},"author":1,"featured_media":512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[113],"tags":[],"class_list":["post-54","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":511,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions\/511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/512"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}