How To Uncheck Default Checkbox When Another Is Checked - Angular

Question

I need to have the first value "none" checked as default and then unchecked when any of the other options are checked. I have found the way to do this using the ng-model but I'm using ng-model to build an object for email. Is there a way that I can do this using an angularish style?

<div class="activate-mail-subsection">
         <label>Allergies</label><br>
         <div class="checkbox mailorder-checkbox">
            <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.none" tabindex="1"/> None
        </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1"/> Codeine
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1"/> Sulfa
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1"/> Asprin
         </div>
         <div class="checkbox mailorder-checkbox">
             <input name="allergies" class="checkbox"  type="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1"/> Penicillin
         </div>
            <div class="checkbox mailorder-checkbox">
                <label>Other</label>
                <input name="allergies" class="form-control health-profile-text" type="text" ng-model="mailorder.allergies.other" tabindex="1"/>
            </div>
        </div>

Here is the object

  $scope.mailorder = {
    allergies: {none: true, codeine: false, sulfa: false, aspirin: false, penicillin: false, other: ''},
};

Jodevan · Accepted Answer · 2015-11-30 19:00:50Z

2

You can keep using the ng-models to handle their status. This is actually a good idea. "none" will be set if any other value is set to true. With that in mind, you can just add a ng-click to any of your control forms in order to update the none status. If you want, you can also add another function to set all other controls to false upon checking the "none" box, too.

<div class="activate-mail-subsection">
    <label>Allergies</label>
    <br />
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.none" tabindex="1" ng-click="setNone()" />None
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.codeine" tabindex="1" ng-click="update()" />Codeine
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.sulfa" tabindex="1" ng-click="update()" />Sulfa
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.asprin" tabindex="1" ng-click="update()" />Asprin
    </div>
    <div class="checkbox mailorder-checkbox">
        <input type="checkbox" name="allergies" class="checkbox" ng-model="mailorder.allergies.penicillin" tabindex="1" ng-click="update()" />Penicillin
    </div>
    <div class="checkbox mailorder-checkbox">
        <label>Other</label>
        <input type="text" name="allergies" class="form-control health-profile-text" ng-model="mailorder.allergies.other" tabindex="1" ng-change="update()" />
    </div>
</div>

(Notice the updateNone() and update() hooks in the HTML code).

angular.module("app", []).controller('Ctrl',
    function($scope) {
        $scope.mailorder = {
            allergies: {
                none: true,
                codeine: false,
                sulfa: false,
                aspirin: false,
                penicillin: false,
                other: ''
            }
        };

        $scope.setNone = function() {
            $scope.mailorder.allergies.none = true;
            // Iterate over all mailorder elements
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                $scope.mailorder.allergies[i] = null;
            }
        }

        $scope.update = function() {
            for (var i in $scope.mailorder.allergies) {
                if (i === 'none') {
                    continue;
                }
                if ($scope.mailorder.allergies[i]) {
                    $scope.mailorder.allergies.none = false;
                    return;
                }
            }
            $scope.mailorder.allergies.none = true;
        };
    }
);

Here's an example in Plunker: http://plnkr.co/edit/b0JtSA7wI2XHd7KriSDp?p=preview

answered Nov 30, 2015 at 19:00

Jodevan

7501 gold badge6 silver badges20 bronze badges

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

5 Comments

Jodevan Over a year ago

If it fits your need, please don't forget to mark it as a valid answer ;-)

billy_comic Over a year ago

This actually does fit my needs with a small modification. I'll be marking this as answer. But, One question. Is there a way that I can apply this to multiple sets of check boxes without having to duplicate the code and calling different functions? Ex. $scope.severity.none and so on.

billy_comic Over a year ago

not sure if you saw my comment. Is there a way to accomplish this with wildcards by chance?

Jodevan Over a year ago

Yes. Let's suppose for each criterion you'll have a "none" option. You can change the setNone() and update() functions to have a parameter, which is the criterion. I'll update the code in plunker. Hold on...

Jodevan Over a year ago

If you're really going to have several criteria, you should consider writing a directive: docs.angularjs.org/guide/directive ;-)

Simon H · Accepted Answer · 2015-11-30 18:54:55Z

0

How about just making the none one a function of all the other responses?

 <input name="allergies" class="checkbox"  
        type="checkbox" 
        ng-checked="!mailorder.allergies.codeine && !mailorder.allergies.sulfa &!...."

If your list of alternatives gets longer, you could shift this to a function in your controller. In ES6 this can be done quite succinctly

$scope.isNone = function() {    
   return Object.values($scope.mailorder).every(r => !r)
}

answered Nov 30, 2015 at 18:54

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Collectives™ on Stack Overflow

How To Uncheck Default Checkbox When Another Is Checked - Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related