Angular JS with specific select checkboxes

Question

<body ng-app="workApp">
<div ng-controller="firstClaimController">
<input type="checkbox" ng-click="sbcfunction()"> Option 1
<input type="checkbox" ng-click="sbcfunction()"> Option 2
<input type="checkbox" ng-click="sbcfunction()"> Option 3
<input type="checkbox" ng-click="sbcfunction()"> Option 4

            {{myValue}}
        </div>

    <script type="text/javascript" >
        var claimController = angular.module('workApp', []); 
        claimController.controller('firstClaimController', function($scope){
    // Test the controller whether it works
        $scope.myValue = "asdf";
    // 
            $scope.sbcfunction = function () {

            };
    });
    </script>

The above is my code and i got 4 checkboxes. The aim is Option 1 is single select and Options 2-4 are multi-select. If Option 1 is selected, Option 2-4 should be deselected automatically. If Option 2-4 are selected Option 1 should be deselected.

Looking for a better solution with angularjs.

Hi @Alaksandar! Welcome to Stackoverflow! Does my answer solve your question? If it does you should mark it as accepted, if it doesn't could you please explain me how can I make it better? Thanks! — Josep
– Josep, Commented Oct 31, 2014 at 19:47
@Josep Thanks for your support. I shall work it out and keep you posted. — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Nov 13, 2014 at 6:53

Josep · Accepted Answer · 2014-10-31 04:35:45Z

2

Use ng-change.

Without Functions

This should work in the way that you want it to:

<label><input type="checkbox" ng-model="option1" ng-change="multiOption1=multiOption1&&!option1;multiOption2=multiOption2&&!option1;multiOption3=multiOption3&&!option1"> Option 1</label>
<label><input type="checkbox" ng-model="multiOption1" value="option2" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 2</label>
<label><input type="checkbox" ng-model="multiOption2" value="option3" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 3</label>
<label><input type="checkbox" ng-model="multiOption3" value="option4" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 4</label>

Example

With Functions

If you prefer to use functions, you can do it like this:

In your controller add this:

$scope.option1=true;
$scope.option1Changed=function(){
    $scope.multiOption1=$scope.multiOption1&&!$scope.option1;
    $scope.multiOption2=$scope.multiOption2&&!$scope.option1;
    $scope.multiOption3=$scope.multiOption3&&!$scope.option1;
}
$scope.multiOptionsChanged=function(){
    $scope.option1=!($scope.multiOption1||$scope.multiOption2||$scope.multiOption3);
}

And in your view do this:

<input type="checkbox" ng-model="option1" ng-change="option1Changed()"> Option 1
<input type="checkbox" ng-model="multiOption1" value="option2" ng-change="multiOptionsChanged()"> Option 2
<input type="checkbox" ng-model="multiOption2" value="option3" ng-change="multiOptionsChanged()"> Option 3
<input type="checkbox" ng-model="multiOption3" value="option4" ng-change="multiOptionsChanged()"> Option 4

Example

edited Oct 31, 2014 at 4:35

answered Oct 31, 2014 at 4:06

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

2 Comments

Jarema Over a year ago

Josep, looks like in Your example You can't do multi-select with options 2-4.

Josep Over a year ago

oh! sorry give me a sec to fix it! you are right! I thought that you wanted them to be radio buttons! my bad!

Collectives™ on Stack Overflow

Angular JS with specific select checkboxes

1 Answer 1

Without Functions

Example

With Functions

Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Without Functions

With Functions

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related