Creating a function in AngularJS to select all checkboxes

Question

Creating a function in AngularJS to select all checkboxes

I recently started working with Angular and I implemented a select all checkbox that checks all the boxes using ng-model/ng-checked.

    <th>
        <input type="checkbox" id="selectAll" ng-model="selectAll"/>
    </th>
    <th>
        ${Case Number}
    </th>
    <tr ng-repeat="item in c.onbCase>
        <td><input type="checkbox" name="checkbox" ng-click="checkboxFunc(item)"
                   ng-model="item.checked"
                   ng-checked="selectAll || item.checked"/>
        </td>
        <td>{{item.number}}</td>
    </tr>

I have a function named checkboxFunc that sets item.selected to true when checked and adds the case number to an array:

$scope.onbNum = [];

    $scope.checkboxFunc =  function(item){
        if(item.selected == false) {
            if($scope.onbNum.indexOf(item.number)==-1){
                $scope.onbNum.push(
                    item.number
                )
            }
            item.selected = true;
        } else {
            if($scope.onbNum.indexOf(item.number)!==-1){
                var pos = $scope.onbNum.indexOf(item.number);
                $scope.onbNum.splice(pos,1)
            }
            item.selected = false;
        }
    }

Although the Select All checkbox is working fine to check all the boxes, I am looking for a way to ensure that all the case numbers are added to the array. How can I modify my function to achieve this?

javascript angularjs function checkbox

Answer 1

Answer №1

Avoid using both ng-checked and ng-model on the same element.

As stated in the documentation:

It is recommended not to combine the ng-checked directive with ngModel, as this may cause unexpected behavior.

— AngularJS ng-checked Directive API Reference

Answer 2

Avoid using both ng-checked and ng-model on the same element.

As stated in the documentation:

It is recommended not to combine the ng-checked directive with ngModel, as this may cause unexpected behavior.

— AngularJS ng-checked Directive API Reference

Answer 3

Answer №2

If you want to track which checkboxes are checked, you can create an array like this:

$scope.checkedBoxes = [
  { id:1, isChecked:false },
  { id:2, isChecked:false },
  { id:3, isChecked:false }
];

Here are the functions you can use:

$scope.selectedIds = [];
$scope.checkAllBoxes =  function(){
    $scope.selectedIds = [];
    for(var i=0; i<$scope.checkedBoxes.length; i++){
        $scope.checkedBoxes[i].isChecked = $scope.selectAll;
    }
    if($scope.selectAll === true){
        for(var i=0; i<$scope.checkedBoxes.length; i++){
            $scope.selectedIds.push($scope.checkedBoxes[i].id);
        }
    }
}

$scope.checkboxClicked =  function(item){
    if(item.isChecked) {
        if($scope.selectedIds.indexOf(item.id) === -1){
            $scope.selectedIds.push(
                item.id
            )
        }
    } else {
        var pos = $scope.selectedIds.indexOf(item.id);
        if(pos > -1){
            $scope.selectedIds.splice(pos, 1);
        }
        $scope.selectAll = false;
    }
}

Here is an example of how you can use this in your HTML page:

<th>
    <input type="checkbox" id="selectAll" ng-model="selectAll"
       ng-click="checkAllBoxes()"/>
</th>
<th>    ${Case Number}
</th>     

<tr ng-repeat="item in checkedBoxes">
    <td><input type="checkbox" name="checkbox" 
      ng-click="checkboxClicked(item)" ng-model="item.isChecked" 
      ng-checked="selectAll || item.isChecked"/>
    </td>
    <td>{{item.id}}</td>
</tr>

Hopefully this solution will work for you or at least give you some ideas.

Answer 4

If you want to track which checkboxes are checked, you can create an array like this:

$scope.checkedBoxes = [
  { id:1, isChecked:false },
  { id:2, isChecked:false },
  { id:3, isChecked:false }
];

Here are the functions you can use:

$scope.selectedIds = [];
$scope.checkAllBoxes =  function(){
    $scope.selectedIds = [];
    for(var i=0; i<$scope.checkedBoxes.length; i++){
        $scope.checkedBoxes[i].isChecked = $scope.selectAll;
    }
    if($scope.selectAll === true){
        for(var i=0; i<$scope.checkedBoxes.length; i++){
            $scope.selectedIds.push($scope.checkedBoxes[i].id);
        }
    }
}

$scope.checkboxClicked =  function(item){
    if(item.isChecked) {
        if($scope.selectedIds.indexOf(item.id) === -1){
            $scope.selectedIds.push(
                item.id
            )
        }
    } else {
        var pos = $scope.selectedIds.indexOf(item.id);
        if(pos > -1){
            $scope.selectedIds.splice(pos, 1);
        }
        $scope.selectAll = false;
    }
}

Here is an example of how you can use this in your HTML page:

<th>
    <input type="checkbox" id="selectAll" ng-model="selectAll"
       ng-click="checkAllBoxes()"/>
</th>
<th>    ${Case Number}
</th>     

<tr ng-repeat="item in checkedBoxes">
    <td><input type="checkbox" name="checkbox" 
      ng-click="checkboxClicked(item)" ng-model="item.isChecked" 
      ng-checked="selectAll || item.isChecked"/>
    </td>
    <td>{{item.id}}</td>
</tr>

Hopefully this solution will work for you or at least give you some ideas.

Answer 5

Answer №3

I'm not entirely certain about the specifics of your question, but I hope my response can provide some assistance: Include ng-click in your selectAll input as shown below:

<input type="checkbox" id="selectAll" ng-model="selectAll" ng-change="checkAll()" />

Additionally, make sure to add the following function to your controller:

    $scope.checkAll = function () {
    if ($scope.selectAll == true) {
        angular.forEach($scope.c.onbCase, function(item) {
            if ($scope.onbNum.indexOf(item.number) == -1) {
                $scope.onbNum.push(
                    item.number
                );
            }
        });
    } else {
        angular.forEach($scope.c.onbCase, function (item) {
            if ($scope.onbNum.indexOf(item.number) !== -1) {
                var pos = $scope.onbNum.indexOf(item.number);
                $scope.onbNum.splice(pos, 1);
            }
        });
    }
}

Answer 6

I'm not entirely certain about the specifics of your question, but I hope my response can provide some assistance: Include ng-click in your selectAll input as shown below:

<input type="checkbox" id="selectAll" ng-model="selectAll" ng-change="checkAll()" />

Additionally, make sure to add the following function to your controller:

    $scope.checkAll = function () {
    if ($scope.selectAll == true) {
        angular.forEach($scope.c.onbCase, function(item) {
            if ($scope.onbNum.indexOf(item.number) == -1) {
                $scope.onbNum.push(
                    item.number
                );
            }
        });
    } else {
        angular.forEach($scope.c.onbCase, function (item) {
            if ($scope.onbNum.indexOf(item.number) !== -1) {
                var pos = $scope.onbNum.indexOf(item.number);
                $scope.onbNum.splice(pos, 1);
            }
        });
    }
}

Creating a function in AngularJS to select all checkboxes

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving the date input from a React form powered by Bootstrap

Exploring Style Attribute Manipulation using vanilla JavaScript on Firefox

Issue: Entering data in the input field for each row results in the same value being copied to the qty field

How can I access the parameter value for the tooltip callback function within echarts?

Transferring Session ID between Express.js and Socket.io while dealing with iframes from distinct origins

JavaScript innerHTML not functioning properly when receiving a response from a servlet

styling multiple elements using javascript

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Pattern to identify a JSON string with Regular Expressions

Screen goes dark after switching to full-screen mode (panolens.js/three.js)

What is the best way to incorporate a version number into an Angular PWA application?

Using Three.js: Cloning Mesh and Material to Easily Toggle Clone Opacity

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

Tips on utilizing Jquery to extract an array containing UL, LI, and input elements

The selection feature is not supported for the type of input element in jQuery

jQuery restriction on selecting checkbox quantity

"Troubleshooting the issue of nested jQuery Ajax requests failing to execute properly

Fetching dynamic JavaScript generated by PHP

Leverage the variable from one function in a different function within Three.js using Javascript

Circular movement in ThreeJS within a specified duration