Deselect the Angular checkbox

Question

Deselect the Angular checkbox

In my project, I need to create a list of checkboxes from an array using classes. There will also be a reset button that, when clicked, will reset all selections. How can I achieve this? Thank you.

    $scope.classList=['Class1','Class2','Class3','Class4'];
$scope.selectedClasses={};
    $scope.selectedClasses.usall=false;
    $scope.selectedClasses.sall=false;          
    $scope.selectedClasses.classListchecked=false;
    $scope.getSubscribedClassList = function(classNam) {

            if(classNam==="All"){
                 $scope.selectedClasses.usall=false;
                 $scope.selectedClasses.classListchecked=false;
            }


                else{
                    $scope.selectedClasses.usall=false;
                    $scope.selectedClasses.sall=false;
                    $scope.selectedClasses.classListchecked.push(classNam)

            }
        }

Here is the link to my fiddle: http://jsfiddle.net/alokranjan39/49cc14yk/38/

javascript angularjs

Answer 1

Answer №1

After making some adjustments, here is the updated fiddle (you can view it here)

Here is the modified HTML:

<div ng-controller="MyCtrl">

  <input type="checkbox" ng-model="masterSelect" ng-click="getSubscribedClassList('All')"> UnSelectAll

  <li ng-repeat="class in classList">
    <span>
      <input type="checkbox" ng-model="class.isSelected" ng-disabled="class.students.length==0">
      {{class.name}} </span>
  </li>
</div>

And the updated JavaScript code:

function MyCtrl($scope) {
  $scope.classList = [{
    isSelected: false,
    name: 'Class1'
  }, {
    isSelected: false,
    name: 'Class2'
  }, {
    isSelected: false,
    name: 'Class3'
  }, {
    isSelected: false,
    name: 'Class4'
  }];

  $scope.getSubscribedClassList = function(classNam) {

    if (classNam === "All") {
      angular.forEach($scope.classList, function(value, index) {       
        value.isSelected = $scope.masterSelect;       
      });
    } else {
      //this part is not necessary. You can get checked items from $scope.classList where isSelected === true

    }
  };
}

To retrieve a list of selected items, loop through $scope.classList and check for items where isSelected === true

Answer 2

After making some adjustments, here is the updated fiddle (you can view it here)

Here is the modified HTML:

<div ng-controller="MyCtrl">

  <input type="checkbox" ng-model="masterSelect" ng-click="getSubscribedClassList('All')"> UnSelectAll

  <li ng-repeat="class in classList">
    <span>
      <input type="checkbox" ng-model="class.isSelected" ng-disabled="class.students.length==0">
      {{class.name}} </span>
  </li>
</div>

And the updated JavaScript code:

function MyCtrl($scope) {
  $scope.classList = [{
    isSelected: false,
    name: 'Class1'
  }, {
    isSelected: false,
    name: 'Class2'
  }, {
    isSelected: false,
    name: 'Class3'
  }, {
    isSelected: false,
    name: 'Class4'
  }];

  $scope.getSubscribedClassList = function(classNam) {

    if (classNam === "All") {
      angular.forEach($scope.classList, function(value, index) {       
        value.isSelected = $scope.masterSelect;       
      });
    } else {
      //this part is not necessary. You can get checked items from $scope.classList where isSelected === true

    }
  };
}

To retrieve a list of selected items, loop through $scope.classList and check for items where isSelected === true

Answer 3

Answer №2

Check out the updated fiddle here - http://jsfiddle.net/49cc14yk/43/

This is the HTML code:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectedClasses" ng-click="getSubscribedClassList()">
    UnSelectAll                 

    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" ng-model="class.value">
                {{class.label}}
        </span>
    </li>
</div>

And this is the JS code:

function MyCtrl($scope) {
    $scope.classList=[{
        label: 'Class1', value: false
    }, {
        label: 'Class2', value: false
    }, {
        label: 'Class3', value: false
    }, {
        label: 'Class4', value: false
    }];

    $scope.getSubscribedClassList = function() {
      $scope.classList.forEach(function(obj) {
          obj.value = $scope.selectedClasses;
      });
    }
}

Answer 4

Check out the updated fiddle here - http://jsfiddle.net/49cc14yk/43/

This is the HTML code:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectedClasses" ng-click="getSubscribedClassList()">
    UnSelectAll                 

    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" ng-model="class.value">
                {{class.label}}
        </span>
    </li>
</div>

And this is the JS code:

function MyCtrl($scope) {
    $scope.classList=[{
        label: 'Class1', value: false
    }, {
        label: 'Class2', value: false
    }, {
        label: 'Class3', value: false
    }, {
        label: 'Class4', value: false
    }];

    $scope.getSubscribedClassList = function() {
      $scope.classList.forEach(function(obj) {
          obj.value = $scope.selectedClasses;
      });
    }
}

Answer 5

Answer №3

Check out the updated fiddle for the array as well - http://jsfiddle.net/49cc14yk/45/

Here is the HTML code snippet:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectAll" ng-click="getSubscribedClassList('ALL')">
    UnSelectAll                 
    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" name="selectedClasses[]" value="{{class}}"
            ng-checked="selectedClassList.indexOf(class) > -1" ng-click="getSubscribedClassList(class)">
            {{class}}
        </span>
    </li>
</div>

And here is the JS code snippet:

function MyCtrl($scope) {
    $scope.classList = ['Class1','Class2','Class3','Class4'];
    // Initialise below array as per your requirement, maybe blank
    $scope.selectedClassList = ['Class1','Class2'];

    $scope.getSubscribedClassList = function(value) {
        if(value == 'ALL') {
            $scope.selectedClassList = [];
            if($scope.selectAll) {
                $scope.selectedClassList = Object.create($scope.classList);
            }
        } else {
            var idx = $scope.selectedClassList.indexOf(value);
            if (idx > -1) {
                $scope.selectedClassList.splice(idx, 1);
            } else {
                $scope.selectedClassList.push(value);
            }
        }
    };
}

It's recommended to use objects in this scenario, so I have included that solution as well.

Answer 6

Check out the updated fiddle for the array as well - http://jsfiddle.net/49cc14yk/45/

Here is the HTML code snippet:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectAll" ng-click="getSubscribedClassList('ALL')">
    UnSelectAll                 
    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" name="selectedClasses[]" value="{{class}}"
            ng-checked="selectedClassList.indexOf(class) > -1" ng-click="getSubscribedClassList(class)">
            {{class}}
        </span>
    </li>
</div>

And here is the JS code snippet:

function MyCtrl($scope) {
    $scope.classList = ['Class1','Class2','Class3','Class4'];
    // Initialise below array as per your requirement, maybe blank
    $scope.selectedClassList = ['Class1','Class2'];

    $scope.getSubscribedClassList = function(value) {
        if(value == 'ALL') {
            $scope.selectedClassList = [];
            if($scope.selectAll) {
                $scope.selectedClassList = Object.create($scope.classList);
            }
        } else {
            var idx = $scope.selectedClassList.indexOf(value);
            if (idx > -1) {
                $scope.selectedClassList.splice(idx, 1);
            } else {
                $scope.selectedClassList.push(value);
            }
        }
    };
}

It's recommended to use objects in this scenario, so I have included that solution as well.

Deselect the Angular checkbox

Answer №1

Answer №2

Answer №3

Similar questions

Update the background URL of a div element using an HTML tag

Remove feature in HTML file upload form

How can I display the value of a clicked text in the search input box using AngularJS and Bootstrap?

Node.js used to create animated gif with unique background image

Activate Bootstrap tooltip when input element is focused, and then when the next input element is selected

Tips for integrating jwt token into axios request

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

Press the button to reveal the table - jQuery/JavaScript

How to capture the "chip close" event in Vuetify

What is the solution to the TypeScript error stating that there is no index signature with a parameter of type 'string' on the 'Object' type?

Using a variable as an argument for a DOM function in JavaScript

Adding various items to a group

jQuery failing to transmit JSON in AJAX POST call

React: Update the hidden input's value to reflect the total number of spans clicked

Comparing WebSockets and XHR for transmitting data

Obtaining Runtime Inputs from the Command Line

Encountering issues with Next JS navigation when using the mobile back button

Ways to stop the Kendo Panelbar from collapsing upon clicking a button on the panelbar

Transfer a single search result to a different webpage from a list of multiple results

Synchronize CSS Properties with JavaScript Event