CODEWITHSUNDEEP
javascripthtmlangularjscheckbox
JP Dolocanog
JP Dolocanog

Reputation: 451

AngularJS - How to set the value of the checkbox as true by checking another checkbox?

I have two checkboxes. If you click checkbox B, checkbox A must be checked too. But in my code, when I click checkbox B, the checkbox A is also checked. But the ng-model of checkbox A is not changing it's value from false to true. Can someone help me with this? Thank you in advance! Here's my code below: (Try running the code snippet)

<div ng-app="myApp" ng-controller="myCtrl">
    Box a
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
    Box b
    <input type="checkbox" ng-model="box2"> {{box2}}
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
	    $scope.box1 = false;
            $scope.box2 = false;
            });
    </script>

Upvotes: 2

Views: 149

Answers (5)

JP Dolocanog
JP Dolocanog

Reputation: 451

@Commercial Suicide has a good answer. I also found another method which uses less logic. Check the codes below:

<div ng-app="myApp" ng-controller="myCtrl">
    Box a
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
    Box b
    <input type="checkbox" ng-click="click()" ng-model="box2"> {{box2}}
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
	    $scope.box1 = false;
            $scope.box2 = false;
            
            $scope.click = function () {
                $scope.box1 = $scope.box2;
            };
            });
    </script>

Upvotes: 0

Christian Dan Tecson
Christian Dan Tecson

Reputation: 1

basically, ng-checked does not change the value of $scope.box1. what you can do is display {{box2 || box1}} instead of {{box1}}

Upvotes: 0

Kaustubh Khare
Kaustubh Khare

Reputation: 3510

Pass same variable into ng-model of both input boxes

<div ng-app="myApp" ng-controller="myCtrl">
    Box a
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
    Box b
    <input type="checkbox" ng-model="box2" ng-change="onChange()"> {{box2}}
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
	    $scope.box1 = false;
            $scope.box2 = false;
            $scope.onChange= function(){
              $scope.box1= $scope.box2;    
            }; 
            });
           
    </script>

Upvotes: 0

P.S.
P.S.

Reputation: 16394

You can add ng-change directive on box2, which will invoke the function, where you can change the value of box1 programmatically, like this:

<div ng-app="myApp" ng-controller="myCtrl">
    Box a
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
    Box b
    <input type="checkbox" ng-model="box2" ng-change="checkBox1()"> {{box2}}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope) {
    $scope.box1 = false;
    $scope.box2 = false;
    $scope.checkBox1 = function() {
      $scope.box1 = $scope.box2;
    }
  });
</script>

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

One solution can be attach a change event handler to the second checkbox and change the box1's scope inside this method.

<div ng-app="myApp" ng-controller="myCtrl">
    Box a
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
    Box b
    <input type="checkbox"  ng-change="change()" ng-model="box2"> {{box2}}
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
              app.controller('myCtrl', function ($scope) {
	    $scope.box1 = false;
            $scope.box2 = false;
            $scope.change=function(){
               $scope.box1=$scope.box2;
            }
            });
    </script>

One single advice:

ng-model and ng-checked are not meant to be used together.

ng-checked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked.

You should be able to just use ng-model, binded to a boolean property on your model.

Upvotes: 1

Related Questions