Get true or false for list of checkboxes when clicked button in AngularJS

Question

When I click the "APPLY" button, I need to get all the checked values of the checkboxes.

I am new to AngularJs. I have a list of checkboxes and according to the checkboxes condition I have to select and deselect the table columns, i.e the checkboxes are the actual columns.

HTML

<li ng-repeat="col in columns">
  <span class="inputH">
    <input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="chk[col.name]" id="{{col.name}}">
    <input type="checkbox" value="col.name" ng-if="col.default === false"  ng-model="chk[col.name]" id="{{col.name}}">
  </span>
  <span class="textH">{{col.name}}</span>
</li>
<li>
  <button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
  <button class="btn-default" ng-click="onCustomization()">Cancel</button>
 </li>

If you notice, onCustomizationApply(), on this I need to get all checkboxes which are checked

Possible duplicate of How to get checkbox value in angularjs? — Matheno
– Matheno, Commented Jun 15, 2016 at 8:20

Vicky Kumar · Accepted Answer · 2016-06-15 08:17:25Z

0

try this give common class to all checkbox

<li ng-repeat="col in columns">
<span class="inputH">
<input class="mychkbox"type="checkbox" value="col.name" ng-if="col.default === true" ng-model="chk[col.name]" id="{{col.name}}">
<input class="mychkbox" type="checkbox" value="col.name" ng-if="col.default === false"  ng- model="chk[col.name]" id="{{col.name}}">
</span>
<span class="textH">{{col.name}}</span>
</li>
<li>
<button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
<button class="btn-default" ng-click="onCustomization()">Cancel</button>
</li>

in function onCustomizationApply()

angular.forEach($(".gridCheck"),function(val,index){

if(val.checked){
//here we will get those fields which are checked and we can perform   operation
}
})

answered Jun 15, 2016 at 8:17

Vicky Kumar

1,4441 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matheno · Accepted Answer · 2016-06-15 08:18:08Z

0

So I modified your code a bit and made a JSFiddle: http://jsfiddle.net/Lvc0u55v/5415/

HTML:

<li ng-repeat="col in columns">
    <span class="inputH">
    <input type="checkbox" ng-value="col.default" value="col.name" ng-model="chk[col.name]" id="{{col.name}}">
  </span>
    <span class="textH">{{col.name}}</span>
  </li>
  <li>
    <button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
    <button class="btn-default" ng-click="onCustomization()">Cancel</button>
  </li>

Angular:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.columns = [{
    name: 'col1',
    default: true
  }, {
    name: 'col2',
    default: true
  }, {
    name: 'col3',
    default: true
  }];

  $scope.chk = {};

  $scope.onCustomizationApply = function() {
    console.log($scope.chk);
  };
}

answered Jun 15, 2016 at 8:18

Matheno

4,2026 gold badges40 silver badges54 bronze badges

2 Comments

Abhishek Asthana Over a year ago

why did you removed another checkbox, basically the value of selected checkbox will get saved in a cookie. and on load I am going to read it, depending I will check or uncheck the checkbox

Matheno Over a year ago

Ah ok, can you add this extra info in the OP?

NTP · Accepted Answer · 2016-06-15 08:22:09Z

0

if you change your code (ng-model) from

<input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="chk[col.name]" id="{{col.name}}">

to

<input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="col.colName" id="{{col.name}}">

since ng-model is set to {{col.colName}} when you change this value, value of col in columns also changes. Therefore on click event of button you can iterate through columns to see if value it is checked or not.

 angular.forEach($scope.columns, function (value, key) {
        if (value.colName == true) {
            //checked
        }
        else {
            //not checked
        }
    });

answered Jun 15, 2016 at 8:22

NTP

4,4483 gold badges18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Get true or false for list of checkboxes when clicked button in AngularJS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related