Pass checkbox value to angular's ng-click

Question

Is there a way to pass to angular directive ng-click the value of the associated input?

In other words, what should replace this.value in the following:

<input type="checkbox" id="cb1" ng-click="checkAll(this.value)" />

PS. I don't want a workaround to alternate values, I just wonder if is possible to pass a value of an input as argument to an angular function.

Can you please add some more code what in you want in checkAll — Mitul, Oct 30 '15 at 08:30
Possible duplicate of [Angular checkbox and ng-click](http://stackoverflow.com/questions/20290738/angular-checkbox-and-ng-click) — Kulbhushan Singh, Oct 30 '15 at 09:23

score 44 · Accepted Answer · edited May 23 '17 at 12:25

You can do the following things:

Use ng-model if you want to bind a html component to angular scope
Change ng-click to ng-change
If you have to bind some value upon checking and un-checking the checkbox use ng-true-value="someValue" and ng-false-value="someValue"

The order of execution of ng-click and ng-model is ambiguous since they do not define clear priorities. Instead you should use ng-change or a $watch on the $scope to ensure that you obtain the correct values of the model variable.

Courtesy of musically_ut

Working Demo

<input type="checkbox" id="cb1" ng-model="check" ng-change="checkAll(check)" ng-true-value="YES" ng-false-value="NO"/> Citizen

score 12 · Answer 2 · answered Nov 03 '17 at 13:10

12

Today i wanted to do the same thing and i see nobody answered the actual question. This is against the Angular philosophy, but you can replace "this.value" with "$event.target.checked" :

<input type="checkbox" id="cb1" ng-click="checkAll($event.target.checked)" />

answered Nov 03 '17 at 13:10

Arntor

766
8
12

2

$event is undefined in a checkbox on ng-change unfortunately – Shift 'n Tab Nov 20 '18 at 09:51
Pass $event and then in function var checkbox = $event.target.checked works. – Leszek P Jul 06 '22 at 11:45

score 2 · Answer 3 · answered Oct 30 '15 at 08:32

2

Assigning an ng-model to it will return boolean value depending upon the change to it:

<input type="checkbox" id="cb1" ng-model="checkValue" ng-change="checkAll(checkValue)" />

Better to use ng-change rather than ng-click

answered Oct 30 '15 at 08:32

Sajal

4,359
1
19
39

There is no much sense to pass the checkValue as argument, cause it anyway available in the model... – serge Oct 30 '15 at 08:34
@Serge Yes there is, it allows you to control the flow of data, and if someone else has to read the code it will be much easier to understand where does that data came from. – ThibaudL Oct 30 '15 at 08:53

score 2 · Answer 4 · answered Oct 30 '15 at 08:34

2

Bind the checkbox to a value and pass it to ng-click.

<input type="checkbox" ng-model="value" id="cb1" ng-click="checkAll(value)" />

answered Oct 30 '15 at 08:34

Daniel Tran

6,083
12
25

score 0 · Answer 5 · answered Feb 11 '21 at 13:17

0

You can do the following things. Worked for me.

<input type="checkbox" id="cb1" ng-click="onChecked($event.target.checked)" />

answered Feb 11 '21 at 13:17

Dark Hawk Entertainment

9
1

1

event will be undefined here – Grijan Sep 15 '21 at 09:49

Pass checkbox value to angular's ng-click

5 Answers5

Linked