CODEWITHSUNDEEP
javascriptangularjscheckbox
user3421352
user3421352

Reputation: 101

How to get selected checkboxes on button click in angularjs

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);
 };

Upvotes: 2

Views: 5037

Answers (4)

Daksh Mehta
Daksh Mehta

Reputation: 124

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 = { };
}

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

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.

Upvotes: 1

JMK
JMK

Reputation: 28059

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);
};

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 1

Related Questions