CODEWITHSUNDEEP
javascriptangularjsradio-button
user3843670
user3843670

Reputation: 187

AngularJs. Is it possible to deselect HTML “radio” input by click?

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.

Fiddle: http://jsfiddle.net/Zoomer/8s4m2e5e/

Upvotes: 14

Views: 34795

Answers (5)

shuaib
shuaib

Reputation: 71

You could do using below. set an attribute.

public selectedMoiProfile : boolean  = false;

<input type="radio" 
       name="selectMoi"
       [checked]="selectedProfile"
       [value]="selectedProfile"
       (click)="onSelect(moiProfile)"
       class="selectMoi">


 onSelect(p: profile) {
     p.selectedProfile= p.selectedProfile? false : true;
 }

Upvotes: 0

Jason Farnsworth
Jason Farnsworth

Reputation: 804

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.

Upvotes: 10

sdemurjian
sdemurjian

Reputation: 690

A simpler solution is to add:

ng-dblclick = "checked = null"

Upvotes: 0

Iain Rough
Iain Rough

Reputation: 1

I solved the issue with the following code:

ng-dblclick = "{{model}} = '' "

Upvotes: 0

Raghavendra
Raghavendra

Reputation: 5387

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>

Upvotes: 20

Related Questions