Use checkbox to clear/update radio buttons in html/angularjs

Question

My form has a checkbox followed by several radio buttons.Basically, the design calls for a user to be able to use a checkbox to clear a set of radio buttons (or set a default value). If the user should select a radio button then the checkbox will also be set.

Overall most of the requirements are met by the code below, however there is one condition when it doesn't work:

User Selects Checkbox. (Check appears in checkbox)
User Selects Radio button. (Radio button is selected)
User Selects Checkbox Again. (Check disappears from checkbox and radio button deselects)
User Selects Radio button. (Check appears in checkbox and radio button selects)
User deselects Checkbox. (Check disappears but the value isn't updated so the radio button does not deselect)

What is happening? How can this be written to get the behavior my user wants?

Thanks, Matt

Here is the code:

var myAngular=angular.module('myApp',[]);

myAngular.controller('myController',function($scope){
  $scope.title="Angular Radio Buttons";
 $scope.selectedValue='i10';
  
  $scope.numStatus = 0;
  
  $scope.numStatusChanged = function () {
     console.log('numStatusChanged:')
        if ($scope.numStatus === 0) {
            $scope.numStatus = 3;
          console.log('From 0 to 3.');
        } else {
            $scope.numStatus = 0;
          console.log('From ' + $scope.numStatus + ' to 0.' )
        }
        
    };
  
  
  $scope.$watch('numStatus', function(newValue,oldValue,scope){
    console.log('newVal:' + newValue + ' oldValue:' + oldValue);
  });
  
   $scope.$watch('aBool', function(newValue,oldValue,scope){
    console.log('aBoolNew:' + newValue + ' aBoolOld:' + oldValue);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='myController'>
    <p>Selected Value: {{numStatus}}</p>
    <div class="checkBoxGroup">
                            <input type="checkbox" id="isCheckbox" ng-model="aBool" value="" ng-checked="numStatus !== 0" ng-change="numStatusChanged()">
                            <label for="isCheckbox">A Value Is Selected</label>
                            <div class="radio-button-vertical">
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="1" name="numStatus" />&nbsp;One</label>
                                </div>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="2" name="numStatus" />&nbsp;Two</label>
                                </div>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="3" name="numStatus" />&nbsp;Three</label>
                                </div>
                            </div>
                        </div>

  </div>
</div>

score 0 · Answer 1 · answered Jan 12 '18 at 20:14

You are using ngChecked and ngModel together, I would expect that your issue is that those two properties are conflicting with each other since they represent similar bindings (other SO post explaining this).

Just rewrite the checkbox to be:

<input type="checkbox" id="isCheckbox" ng-model="aBool" value="" ng-change="numStatusChanged()">

and then do the numStatus !== 0 check in the numStatusChanged() method and use the result to set aBool.

Use checkbox to clear/update radio buttons in html/angularjs

1 Answers1