AngularJS: choosing just one option from a group of checkboxes

Question

AngularJS: choosing just one option from a group of checkboxes

Is there a way to implement single selection on checkboxes, similar to an HTML "select" element?

I currently have a basic HTML table structure:

<tr ng-repeat="subscription in entities">
    <td>
        <input type="checkbox" ng-checked="isChecked(subscription)" ng-click="toggleSelection(subscription)"/>
    </td>
</tr>

In addition, I have defined some simple controller functions for these directives:

$scope.isChecked = function(entity) {
    return $scope.checkedEntity === entity;
};

$scope.toggleSelection = function(entity) {
    entity.checked = !entity.checked;
    if (entity.checked) {
        $scope.checkedEntity = entity;
    } else {
        $scope.checkedEntity = null;
    }
};

However, it seems that the current implementation is not functioning as expected. Upon investigation, I discovered that ng-click has a priority of 0 compared to ng-checked with a priority of 100.

Are there any elegant solutions available to solve this issue?

javascript angularjs

Answer 1

Answer №1

To connect ng-model with subscription.checked, and use ng-click to uncheck all other subscriptions except the one that is clicked. This will allow for toggling of checkboxes.

<tr ng-repeat="subscription in entities">
  <td>
    <input ng-model="subscription.checked" ng-click="updateSelection($index, entities)" type="checkbox" />
  </td>
</tr>

Instead of a regular for loop, you can utilize angular's forEach which provides better readability by aliasing each item as subscription:

$scope.updateSelection = function(position, entities) {
  angular.forEach(entities, function(subscription, index) {
    if (position != index) 
      subscription.checked = false;
  });
}

For a live demonstration, visit: http://plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p=preview

Answer 2

To connect ng-model with subscription.checked, and use ng-click to uncheck all other subscriptions except the one that is clicked. This will allow for toggling of checkboxes.

<tr ng-repeat="subscription in entities">
  <td>
    <input ng-model="subscription.checked" ng-click="updateSelection($index, entities)" type="checkbox" />
  </td>
</tr>

Instead of a regular for loop, you can utilize angular's forEach which provides better readability by aliasing each item as subscription:

$scope.updateSelection = function(position, entities) {
  angular.forEach(entities, function(subscription, index) {
    if (position != index) 
      subscription.checked = false;
  });
}

For a live demonstration, visit: http://plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p=preview

Answer 3

Answer №2

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'other';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
  </div>



</body>

</html>

Answer 4

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'other';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
  </div>



</body>

</html>

Answer 5

Answer №3

In order to achieve a similar functionality, I implemented the following code snippet. The key is utilizing the ng-click attribute which works seamlessly. Both checkbox-1 and checkbox-2 are boolean values.

<form>
    <input type="checkbox" ng-click="checkbox-2 = false" ng-model="checkbox-1">
    <input type="checkbox" ng-click="checkbox-1 = false" ng-model="checkbox-2">
</form>

Answer 6

In order to achieve a similar functionality, I implemented the following code snippet. The key is utilizing the ng-click attribute which works seamlessly. Both checkbox-1 and checkbox-2 are boolean values.

<form>
    <input type="checkbox" ng-click="checkbox-2 = false" ng-model="checkbox-1">
    <input type="checkbox" ng-click="checkbox-1 = false" ng-model="checkbox-2">
</form>

Answer 7

Answer №4

If you're looking for a solution, here are three recommendations that come to mind:

Consider creating a directive that automates the setup of checkboxes and manages their state internally. However, this approach may not be optimal as it shifts a model rule (only one subscription checked) into a DOM manipulation challenge.
Another option is to structure your model in a way that ensures only one subscription can be active at a time. Keep in mind that modifying the model during a change event can trigger additional digest cycles, which could lead to unwanted outcomes.
Alternatively, you could switch to using radio buttons instead of checkboxes. This will enforce the single selection requirement more effectively.

Personally, I lean towards option 3 as I prefer leveraging native input elements whenever possible.

<tr ng-repeat="subscription in entities">
<td><input type="radio"
   ng-model="selection"
   name="subscriptionRadio"
   value="{{subscription}}"/>
</td> 
</tr>

Answer 8

If you're looking for a solution, here are three recommendations that come to mind:

Consider creating a directive that automates the setup of checkboxes and manages their state internally. However, this approach may not be optimal as it shifts a model rule (only one subscription checked) into a DOM manipulation challenge.
Another option is to structure your model in a way that ensures only one subscription can be active at a time. Keep in mind that modifying the model during a change event can trigger additional digest cycles, which could lead to unwanted outcomes.
Alternatively, you could switch to using radio buttons instead of checkboxes. This will enforce the single selection requirement more effectively.

Personally, I lean towards option 3 as I prefer leveraging native input elements whenever possible.

<tr ng-repeat="subscription in entities">
<td><input type="radio"
   ng-model="selection"
   name="subscriptionRadio"
   value="{{subscription}}"/>
</td> 
</tr>

AngularJS: choosing just one option from a group of checkboxes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How does an arrow function access parameters even when they have not been explicitly passed in?

How to validate a <select> element with parsley.js when it is dynamically populated with an object?

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

"Enhance the functionality of multiple elements with this innovative Jquery

What is the purpose of form.$valid verifying the validity of non-required fields?

AngularJS directive created for validation on blur

Ways to implement debounce in handling onChange events for input fields in React

`odd communication between Node.js and Neo4j`

Encountered an issue while attempting to retrieve the access token from Azure using JavaScript, as the response data could

Angular-Material - Issue related to Theme Implementation

Comparing AngularJS and AppML

How to Use Google Tag Manager to Track Forms with Various Choices

Babylon entities failing to run

AngularJS is unable to find the controller specified

What is the best way to create a test for my Vue component using Jest?

How can I parse JSON in React using the Parse function?

Using ThreeJs to create interactive 3D objects with button-controlled movement

Notifying with Socket.IO in Node.js

Using TypeGraphQL with Apollo Server for File Uploads

The functionality of grunt-contrib-copy is causing irreversible damage to binary files