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

Question

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?

priya_singh · Accepted Answer · 2016-11-18 07:28:36Z

1

Try this

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {


}]);		
</script>
<body ng-app="sampleApp">
<div ng-controller="sampleController" ng-init="checked='false'">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="checked = !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" ng-click="checked = !checked">Yeah :)
</div>

edited Nov 18, 2016 at 7:28

answered Nov 18, 2016 at 7:15

priya_singh

2,4881 gold badge19 silver badges33 bronze badges

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

4 Comments

Idris Over a year ago

Its not working.. Now if i uncheck the checkbox , radio button remains checked. @priya

ngCoder Over a year ago

This is a better approach for this scenario ! Should be accepted answer

Idris Over a year ago

Its working priya.. if i have more radio buttons its not working properly.. can you please? i.e, can you please procced through 3 radio buttons? @priya

Idris Over a year ago

I need to do this with single check box @priya_singh

GraveyardQueen · Accepted Answer · 2016-11-18 07:32:41Z

You could do something like this,it will definitely work

<!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="slave" 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" ng-click="slave=true">Yeah :)

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

I have introduced another variable which will change on click of the radio button,because the event which gets triggered from the radio button is not the check event rather it is the onclick event.

jeeva · Accepted Answer · 2020-01-13 12:45:57Z

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>

bhanu.cs · Accepted Answer · 2016-11-18 07:28:46Z

0

Here you did not specify the two way binding directive i.e ng-model for radio button.

<input id="checkSlave" type="radio" ng-checked="checked" ng-model="checked">Yeah :)

answered Nov 18, 2016 at 7:28

bhanu.cs

1,3751 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related