如何在angularJs中同时绑定单选按钮和复选框？答案

【问题标题】：How to bind the radio button and checkbox simultaneously in angularJs?如何在angularJs中同时绑定单选按钮和复选框？
【发布时间】：2020-01-13 20:45:57
【问题描述】：

我已经尝试过了，如果我选中复选框，那么单选按钮也会被选中。当我选中复选框时，它会很好。

但是，如果我选择单选按钮绑定过程不会发生。即，如果我单击单选按钮，则必须选中复选框。

我不知道该怎么做？

这里放上代码。

<!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>

有人可以帮忙吗？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

试试这个

<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>

【讨论】：

它不工作.. 现在如果我取消选中复选框，单选按钮保持选中状态。 @priya
对于这种情况，这是一个更好的方法！应该被接受的答案
它的工作priya..如果我有更多的单选按钮它不能正常工作..你可以吗？即，您可以通过 3 个单选按钮进行处理吗？ @priya
我需要使用单个复选框@priya_singh

【解决方案2】：

你可以这样做，它肯定会工作

<!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>

我引入了另一个变量，它会在单击单选按钮时发生变化，因为从单选按钮触发的事件不是检查事件，而是 onclick 事件。

【讨论】：

【解决方案3】：

试试这个，效果很好..！

<!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>

【讨论】：

【解决方案4】：

这里你没有指定双向绑定指令，即单选按钮的 ng-model。

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

【讨论】：