AngularJs. Is it possible to deselect HTML “radio” input by click?
A simple solution that works on Angular 1.3+ is:
Template
<input type="radio" ng-model="forms.selected" value="{{value}}" ng-click="radioCheckUncheck($event)">
Controller
let lastChecked = null
$scope.radioCheckUncheck = function (event) {
if (event.target.value === lastChecked) {
delete $scope.forms.selected
lastChecked = null
} else {
lastChecked = event.target.value
}
}
It's similar to the above solution, but maintains its own copy of the previous selection.
Radio buttons can be selected only one at a time and cannot be unchecked by the user once they are checked (unless you do programmatically). So if you want to uncheck it when it is currently selected, you can do this:
<input type="radio" ng-model="checked" value="500" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1000" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1500" ng-click="uncheck($event)" />
In your controller:
$scope.uncheck = function (event) {
if ($scope.checked == event.target.value)
$scope.checked = false
}
DEMO: http://jsfiddle.net/8s4m2e5e/3/
NOTE: If you really want to choose one or none from many options, you may opt for a <select>