Idris Idris - 18 days ago 6
AngularJS Question

How to bind the radio button and checkbox simultaneously in angularJs?

I have tried that, if i check the check box then radio button will also get selected. Its going good when i check the check box.

But, If i select the radio button binding process is not happening. i.e, If i click the radio button ,the check box has to be checked.

I dont know how to do this?

Herewith placed the code.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-model="checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked">Yeah :)

</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= 0;
}]);
</script>
</body>
</html>


Can anyone please help on this?

Answer

Try this Its worked fine..!

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="toggleSwitch()">  
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above: 
<br/> <br/>
<input id="checkSlave"  type="radio" ng-checked="checked" ng-click="toggleSwitch()">Yeah :)

</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= false;

$scope.toggleSwitch=function(){
$scope.checked= !$scope.checked;
}
}]);
</script>
</body>
</html>
</html>