How to get selected checkboxes on button click in angularjs

Question

I want to do something like this

 <input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label>
 <input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label>
 <input type="checkbox" ng-model="third" ng-click="chkSelect()"/><label>Third</label>
 <input type="checkbox" ng-model="forth" ng-click="chkSelect()"/><label>Forth</label>
 <button>Selected</button>

On button click I want to display selected checkbox labelname.

 $scope.chkSelect = function (value) {
     console.log(value);
 };

Surreal Dreams · Accepted Answer · 2014-06-02 19:15:27Z

1

Because the checkboxes are mapped, you can reference $scope.first, $scope.second, etc in your chkSelect() function. It's also possible to have a set of checkboxes mapped as a single array of data instead of having to give each checkbox a name. This is handy if you are generating the checkboxes, perhaps from a set of data.

answered Jun 2, 2014 at 19:15

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

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

4 Comments

user3421352 Over a year ago

I am working on server data. my ng-model is data point set on server so cant make array. Is there any other option?

JMK Over a year ago

@user3421352 Well are you using a service to pull those objects into your controller? At the point that they are in your controller, why not fire them into an array and bind to that?

user3421352 Over a year ago

labels are hard coded but the ng-model with value true or false comes from the server and supposed to change on click.

JMK Over a year ago

I still don't understand why you can't take what you have and put it into an array?

Mathew Berg · Accepted Answer · 2014-06-02 19:43:11Z

1

I agree with Bublebee Mans solution. You've left out a lot of detail on why you're trying to get the label. In any case if you REALLY want to get it you can do this:

$scope.chkSelect = function (value) {
    for(var key in $scope){
        var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
        if(inputs.length){
            var selectedInput = inputs[0];
            var label = selectedInput.nextSibling;
            console.log(label.innerHTML);
        }
    };
};

You can mess around with it to see if it's indeed selected.

fiddle: http://jsfiddle.net/pzz6s/

Side note, for anybody who knows angular please forgive me.

answered Jun 2, 2014 at 19:43

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

2 Comments

user3421352 Over a year ago

They all are nt sibling as I have some more in next rows. Will nextSibling work for that?

Mathew Berg Over a year ago

Can you lay out the exact structure? You can continue to use nextSibling to your hearts content.

Sebastian · Accepted Answer · 2014-07-25 11:04:39Z

If you are dealing with server data, you might need isolated html block and deal with data in controller only.

You can do it by creating array in controller, maybe your data from response, and use ngRepeat directive to deal independently in html code.

Here is what I am telling you:

HTML:

<form ng-controller="MyCtrl">
   <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="checkbox"
              ng-model="my[name]"
              id="{{name}}"
              name="favorite" />
    </label>
    <div>You chose <label ng-repeat="(key, value) in my">
    <span ng-show="value == true">{{key}}<span>
    </label>
    </div>
</form>

Javascript

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

function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}

JMK · Accepted Answer · 2014-06-02 19:19:06Z

0

You want to have something like the following in your controller (untested, working from memory):

$scope.checkBoxModels = [ { name: 'first', checked: false }, { name: 'second', checked: false }, { name: 'third', checked: false }, { name: 'fourth', checked: false } ];

Then in your view:

<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>

Then update your function:

$scope.chkSelect = function (checkBoxModel) {
    console.log(checkBoxModel.name);
};

answered Jun 2, 2014 at 19:19

JMK

28.2k56 gold badges176 silver badges293 bronze badges

1 Comment

user3421352 Over a year ago

First, Second, ... are just placeholder for this question. I am working on server data points.

Collectives™ on Stack Overflow

How to get selected checkboxes on button click in angularjs

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related