AngularJS - Deselect Radio button

Question

Is there a way I can deselect a radio button on click of it? I'm using AngularJS 1.4.4. Using one of the solutions I found here, I've added an ng-click event, but it doesn't work.

foreach (var part in Model.ChildParts)
 {
  <div class="radio  col-md-12">
    <input type="radio"
           id="@Model.FieldName"
           name="@Model.FieldName"
           ng-model="gPA(@Model.Id).value"
           value="@((part as BaseInputPartVM).GetStringValue())"
           ng-click="uncheck($event, @Model.Id)" />
  </div>
 }

In the controller, I have the following code. The below "if" condition is always turning to true and hence everytime I try selecting a radio, it is always set to false. My goal is to deselect a radio button on click of it, if it is already selected.

$scope.uncheck = function (event, partId) {
      if ($scope.gPA(partId).value == event.target.value)
         $scope.gPA(partId).value = false
}

Yes try using ng-value and setting that true or false, see stackoverflow.com/questions/14530785/… — Daniel Kobe
– Daniel Kobe, Commented Oct 22, 2015 at 18:05
In the input element, I've changed value to ng-value. Still the issue persists. I'm able to deselect the radio button, however it doesn't allow me to select the radio buttons. Same is the case with my original code that I posted above. — Test_User
– Test_User, Commented Oct 22, 2015 at 18:26

Community · Accepted Answer · 2017-04-13 12:32:14Z

0

The radio button, by design, is not supposed to be unselected. I would consider using a checkbox instead. https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs

edited Apr 13, 2017 at 12:32

CommunityBot

11 silver badge

answered Oct 22, 2015 at 18:04

Ben

2092 silver badges8 bronze badges

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

Comments

Test_User · Accepted Answer · 2015-10-26 17:24:33Z

Following code worked:

foreach (var part in Model.ChildParts)
{
  <div class="radio  col-md-12">
    <input type="radio"
           id="@Model.FieldName"
           name="@Model.FieldName"
           ng-model="gPA(@Model.Id).value"
           value="@((part as BaseInputPartVM).GetStringValue())"
           ng-mouseup = "setPreviousSelectedValue(@Model.Id)"
           ng-click="uncheck($event, @Model.Id)" />
  </div>
}
<input type="hidden" id="previousRadioSelection" name="previousRadioSelection" ng-model="previousRadioSelection" value="" />

In the controller,

//set previous selected value of radio button      
$scope.setPreviousSelectedValue = function (partId) {
    $scope.previousRadioSelection = $scope.gPA(partId).value;
}

//uncheck radio button      
$scope.uncheck = function (event, partId) {
    if ($scope.previousRadioSelection == event.target.value)
        $scope.gPA(partId).value = null;
}

Collectives™ on Stack Overflow

AngularJS - Deselect Radio button

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related