Question

112

How to get the values of multiple checkboxes in AngularJS?

rated 0 times [ 114] [ 2] / answers: 1 / hits: 20819 / 8 Years ago, thu, december 8, 2016, 12:00:00

In my app I got 7 checkboxes. I want to get the value of the selected checkbox and store into an object. Ff it is deselected I want to remove it in the object.

HTML

<span ng-repeat=days in selectDays>

    <input type=checkbox id={{days}} ng-model=daysSelected/>

    <label for={{days}}>{{days}}</label>

</span>

Controller

$scope.selectDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

$scope.selectedList = {}; //this is the object to store the selected checkbox values

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaynetheoi

Add To Favorites

Follow

Total Points: 146

Total Questions: 116

Total Answers: 103

Location: India

Member since Thu, Apr 8, 2021

3 Years ago

answered 8 Years ago travion · Accepted Answer

The following code is a simple approach -> check this plunker. This example delivers you a very simple KISS principle handling for mulitple autogenerated checkboxes in AngularJS.

Template

<span ng-repeat=day in selectDays>

    <input type=checkbox id={{day}} ng-model=selectedList[day]/>

    <label for={{day}}>{{day}}</label>

</span>

<button ng-click=submit()>Submit</button>

Scopes

//default states

$scope.selectDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

$scope.selectedList = {};



/**

 * Action

 */

$scope.submit = function () {

    angular.forEach($scope.selectedList, function (selected, day) {

        if (selected) {

           console.log(day);

        }

    });

};