14

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/

0

5 Answers 5

20

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>

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

5 Comments

Oh, thanks! I know theory, but i dont know how made this in Angular.
Ok, i acept it. Thanks again, current version of answer is very good for me.
Don't you mean radio buttons in the answers first sentence?
This does not work in Angular 1.3 anymore. In 1.3, the checked value is set to "xyz" before the click event is fired.
how to uncheck radio buttons programatically without jQuery (and without direct user interaction)?
10

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.

1 Comment

Great Works fine Angular 1.3+
0

I solved the issue with the following code:

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

Comments

0

A simpler solution is to add:

ng-dblclick = "checked = null"

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.