AngularJS checkbox feature to tally the number of items that are currently selected or unselected

Question

AngularJS checkbox feature to tally the number of items that are currently selected or unselected

How can I use angularjs to count the number of selected and unselected checkbox items?

My HTML

    <label class="col-xs-5  pull-left" style="font-weight: bold; margin-left: 4px; margin-top: -17px;" >You have selected <font size="3" color="green">{{checkedResult}}</font> Customer(s)</label>

<tr ng-repeat="item in $data " >
             <td width="30" style="text-align: left" header="\'smsChkbx\'">
           <label>
            <input type="checkbox" class="ace" name="someList[]" value="{{item.somename}}" ng-model="checkboxes.items[item.somename]" />

Checkbox Function

 $scope.$watch('checkboxes.items', function(values) {
                        if (!$scope.mydata) {
                            return;
                        }
                        var checked = 0,
                            unchecked = 0,
                            total = $scope.mydata.length;
                        angular.forEach($scope.mydata, function(item) {
                            checked += ($scope.checkboxesSms.items[item.somename]) || 0;
                            unchecked += (!$scope.checkboxesSms.items[item.somename]) || 0;
                        });
                        if ((unchecked == 0) || (checked == 0)) {
                            $scope.checkboxes.checked = (checked == total);
                        }

                        **if(checked != 0 && unchecked != 0){
                            $scope.checkedResult++;
                        }**                    
                        $scope.tableParamsSms.reload();                                                
                         console.log($scope.checkedResult);
                        console.log((checked != 0 && unchecked != 0));
                        angular.element(document.getElementById("select_Sms")).prop("indeterminate", (checked != 0 && unchecked != 0));
                    }, true);

It counts properly when I check for the first time, but also counts when I uncheck the selected ones.

I also want to count when multiple checkboxes are checked simultaneously.

javascript angularjs checkbox

Answer 1

Answer №1

It's important to create a function in AngularJS that will be triggered by clicking on a checkbox.

For example, use the following ng-click directive to call the function: ng-click="toggleSelection(item)"

Within this function, you can manage the selection process by adding or removing items from a list. Here's an example implementation:

$scope.toggleSelection = function(item) {
  var index = $scope.selectedItems.indexOf(item);
  if (index === -1) {
    $scope.selectedItems.push(item);
  } else {
    $scope.selectedItems.splice(index, 1);
  }
};

Finally, you can keep track of the number of selected items using the variable:

var count = $scope.selectedItems.length

Answer 2

It's important to create a function in AngularJS that will be triggered by clicking on a checkbox.

For example, use the following ng-click directive to call the function: ng-click="toggleSelection(item)"

Within this function, you can manage the selection process by adding or removing items from a list. Here's an example implementation:

$scope.toggleSelection = function(item) {
  var index = $scope.selectedItems.indexOf(item);
  if (index === -1) {
    $scope.selectedItems.push(item);
  } else {
    $scope.selectedItems.splice(index, 1);
  }
};

Finally, you can keep track of the number of selected items using the variable:

var count = $scope.selectedItems.length

Answer 3

Answer №2

I wasn't able to make changes to your code, but you could implement something along these lines:

HTML

<div ng-app>
  <h2>Example</h2>
  <div ng-controller="MyCtrl">
   <div ng-repeat="item in Items">
     {{item.name}} <input type="checkbox" ng-model="item.selected" ng-change="Checked(item)" />
   </div>
  </div>
</div>

AngularJS

function MyCtrl($scope) {
$scope.SelectedItems = [];
  $scope.Items = [
    {
        id: 1,
      name: "ABC",
      selected: false
    },
    {
        id: 2,
      name: "DEF",
      selected: false
    },
    {
        id: 3,
      name: "GHI",
      selected: false
    }
  ]
  $scope.Checked = function(item) {
    if (item.selected) {
        $scope.SelectedItems.push(item);
    }
    else {
        var index = $scope.SelectedItems.indexOf(item);
      if (index > -1) {
        $scope.SelectedItems.splice(index, 1);
      }
    }
    console.log($scope.SelectedItems)  //list of selected items
  }
}

Answer 4

I wasn't able to make changes to your code, but you could implement something along these lines:

HTML

<div ng-app>
  <h2>Example</h2>
  <div ng-controller="MyCtrl">
   <div ng-repeat="item in Items">
     {{item.name}} <input type="checkbox" ng-model="item.selected" ng-change="Checked(item)" />
   </div>
  </div>
</div>

AngularJS

function MyCtrl($scope) {
$scope.SelectedItems = [];
  $scope.Items = [
    {
        id: 1,
      name: "ABC",
      selected: false
    },
    {
        id: 2,
      name: "DEF",
      selected: false
    },
    {
        id: 3,
      name: "GHI",
      selected: false
    }
  ]
  $scope.Checked = function(item) {
    if (item.selected) {
        $scope.SelectedItems.push(item);
    }
    else {
        var index = $scope.SelectedItems.indexOf(item);
      if (index > -1) {
        $scope.SelectedItems.splice(index, 1);
      }
    }
    console.log($scope.SelectedItems)  //list of selected items
  }
}

AngularJS checkbox feature to tally the number of items that are currently selected or unselected

My HTML

Checkbox Function

Answer №1

Answer №2

Similar questions

Having trouble retrieving and displaying data from Mongo in Meteor with React

Using jQuery to access the value of the CSS property "margin-left"

Ldap.js: exploring nested searches

Is there a way to modify the separator for ng-tags-input? By default, it is set as

Adjust the Vue.js required property to allow null values but not undefined

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

Leveraging JavaScript to generate a downloadable PDF document from the existing webpage

Scrolling with jQuery to create a fixed navigation bar

Build a React application using ES6 syntax to make local API requests

Issues with the creation of an AngularJS table are causing functionality to malfunction

Vue: Load page content only after the route change is complete

Issue with showing Angular directive

Graph is vanishing while linked

Navigating in AngularJS with various URL parameters

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

JSON failing to show all values sent as a string

An element in defaultProps deemed as nonexistent

Having trouble integrating MaterialUI Datepicker, Dayjs, useFormik, and Yup

Typescript method fails to compile due to an indexing error