How to programmatically uncheck checkbox?

Question

I want to programmatically uncheck a checkbox. I know how to it in javascript but since I'm using angular, i think it's different.

Here's the link of jsfiddle : https://jsfiddle.net/TKVH6/499/

This is the first time I used jsfiddle so please let me know if you cant see the script and html.

This is the html

<input type="checkbox" ng-model="v" ng-click="checkAll()" />
<button ng-click="x()">eto</button>

This is the angular

$scope.x = function () {
    $scope.v.checked=false;
};

I know there are lots of question like this, I've already tried those but I can't make it work.

Thanks!

Jenish Rabadiya · Accepted Answer · 2016-05-18 04:23:43Z

16

<input type="checkbox" ng-checked="v" ng-click="checkAll()" />

In your controller

$scope.v = true; // or false

edited May 18, 2016 at 4:23

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

answered Feb 27, 2015 at 2:25

Murali VP

6,4674 gold badges32 silver badges36 bronze badges

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

2 Comments

Yahia Mgarrech Over a year ago

The combination ng-checked with ng-click is the best solution to control checkboxes from controller, Thanks

Shankar Over a year ago

Was stuck for hours since used ng-model instead of ng-checked which caused uncheck was not happening while unchecking select all programmatically.

Jenish Rabadiya · Accepted Answer · 2015-02-27 02:25:39Z

11

First thing : You have specified controller on ul and bind click event of button outside the ul so moved ng-controller on div.

Second thing: In order to check it pragmatically you need to set $scope.Items[i].Selected = true;

$scope.x = function () {
    alert("x");
    $scope.Items[0].Selected=true;
};

Why we need to set Selected property of Items[i] while I have not declared?

The reason behind that is your html binding is something like this:

<li ng-repeat="item in Items">
    <label>{{item.Name}}
        <input type="checkbox" ng-model="item.Selected" />
    </label>
</li>

Here every item is element from Items array that means your checkbox checked value is now bind to selected property of that object. Even though you have not defined that property in Items collection angular will create it and will bind it to that property. So you are required to set that property. I hope it would help you.

Here is working fiddle => link

edited Feb 27, 2015 at 2:25

answered Feb 27, 2015 at 2:19

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

1 Comment

JFer Over a year ago

It worked for me, But I just needed set Selected on lower case: $scope.Items[0].selected

Collectives™ on Stack Overflow

How to programmatically uncheck checkbox?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related