AngularJs. Is it possible to deselect HTML “radio” input by click?
34,171
Solution 1
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>
Solution 2
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.
Author by
user3843670
Updated on August 01, 2020Comments
-
user3843670 almost 4 years
I have radio inputs and want to ucheck state by click on radio if current radio is checked.
This code:
<input type="radio" id="average_0" name="average" ng-model="checked" ng-change="false" value="500" class="ng-valid ng-dirty"> <input type="radio" id="average_1" name="average" ng-model="checked" ng-change="false" value="1000" class="ng-valid ng-dirty"> <input type="radio" id="average_2" name="average" ng-model="checked" ng-change="false" value="1500" class="ng-valid ng-dirty">
Not working.
-
user3843670 over 9 yearsOh, thanks! I know theory, but i dont know how made this in Angular.
-
user3843670 over 9 yearsOk, i acept it. Thanks again, current version of answer is very good for me.
-
Paul Weber about 9 yearsDon't you mean radio buttons in the answers first sentence?
-
ArjaaAine almost 9 yearsThis does not work in Angular 1.3 anymore. In 1.3, the checked value is set to "xyz" before the click event is fired.
-
zok over 8 yearshow to uncheck radio buttons programatically without jQuery (and without direct user interaction)?
-
Crock about 7 yearsGreat Works fine Angular 1.3+