Retrieving the Value of a Checked Checkbox in Angular

Question

Retrieving the Value of a Checked Checkbox in Angular

I'm having trouble retrieving the selected item from an input checkbox.

<ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='whatIsChecked(shoe.selected)'>Apply</button>
</ul>

Then in my controller:

$scope.whatIsChecked = function(selectedThing) {
  console.log(selectedThing);
};

The above code is returning undefined.

Although the list items are being displayed correctly, it seems that the ng-model isn't storing the value of shoe.name or the checked item.

javascript angularjs

Answer 1

Answer №1

the variable shoe is only valid within the ng-repeat loop.

If you want to access what has been selected, you should consider using the filter method.

Update: If the selected property is not available, you can store the selected items in a separate array by triggering the ng-click event.

Please refer to the code snippet below:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
  
    $scope.checkedShoes = [];
    
    $scope.shoebox = [{
        name: 'shoe1'
      },
      {
        name: 'shoe2'
      },
      {
        name: 'shoe3'
      },
      {
        name: 'shoe4'
      }
    ];
    
    $scope.save = function(e, shoe) {
      if (e.target.checked) {
        $scope.checkedShoes.push(shoe);
      } else {
        var index = $scope.checkedShoes.indexOf(shoe);
        if( index > -1) {
          $scope.checkedShoes.splice(index, 1);
        }
      }
      
    };
    
    $scope.whatIsChecked = function() {
      //var selected = $scope.shoebox.filter(function(item) {
      //  return item.selected === true;
      //});
      
      console.log($scope.checkedShoes);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" , ng-controller="myCtrl">
  <ul>
    <li ng-repeat='shoe in shoebox'>
      <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'>
      <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
    </li>
    <button ng-click='whatIsChecked()'>Apply</button>
  </ul>
</div>

Answer 2

the variable shoe is only valid within the ng-repeat loop.

If you want to access what has been selected, you should consider using the filter method.

Update: If the selected property is not available, you can store the selected items in a separate array by triggering the ng-click event.

Please refer to the code snippet below:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
  
    $scope.checkedShoes = [];
    
    $scope.shoebox = [{
        name: 'shoe1'
      },
      {
        name: 'shoe2'
      },
      {
        name: 'shoe3'
      },
      {
        name: 'shoe4'
      }
    ];
    
    $scope.save = function(e, shoe) {
      if (e.target.checked) {
        $scope.checkedShoes.push(shoe);
      } else {
        var index = $scope.checkedShoes.indexOf(shoe);
        if( index > -1) {
          $scope.checkedShoes.splice(index, 1);
        }
      }
      
    };
    
    $scope.whatIsChecked = function() {
      //var selected = $scope.shoebox.filter(function(item) {
      //  return item.selected === true;
      //});
      
      console.log($scope.checkedShoes);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" , ng-controller="myCtrl">
  <ul>
    <li ng-repeat='shoe in shoebox'>
      <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'>
      <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
    </li>
    <button ng-click='whatIsChecked()'>Apply</button>
  </ul>
</div>

Answer 3

Answer №2

You can easily retrieve the selected items by using an angular.forEach loop, especially when dealing with multiple checked items.

$scope.checkedItems = [];
        angular.forEach($scope.shoebox, function(value, key) {
          if (value.selected)
            $scope.checkedItems.push(value.name);
});

Check it out:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.shoebox = [{
    name: 'Reboke',
    selected: false
  }, {
    name: 'woodlands',
    selected: false
  }, {
    name: 'Nike',
    selected: false
  }, {
    name: 'Fila',
    selected: false
  }];
  $scope.checkedItems = function() {
    $scope.checkedItems = [];
    angular.forEach($scope.shoebox, function(value, key) {
      if (value.selected)
        $scope.checkedItems.push(value.name);
    });

  }
});

<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='checkedItems()'>Apply</button>
   Checked items are: {{checkedItems}}
</ul>
     
</body>
</html>

Answer 4

You can easily retrieve the selected items by using an angular.forEach loop, especially when dealing with multiple checked items.

$scope.checkedItems = [];
        angular.forEach($scope.shoebox, function(value, key) {
          if (value.selected)
            $scope.checkedItems.push(value.name);
});

Check it out:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.shoebox = [{
    name: 'Reboke',
    selected: false
  }, {
    name: 'woodlands',
    selected: false
  }, {
    name: 'Nike',
    selected: false
  }, {
    name: 'Fila',
    selected: false
  }];
  $scope.checkedItems = function() {
    $scope.checkedItems = [];
    angular.forEach($scope.shoebox, function(value, key) {
      if (value.selected)
        $scope.checkedItems.push(value.name);
    });

  }
});

<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='checkedItems()'>Apply</button>
   Checked items are: {{checkedItems}}
</ul>
     
</body>
</html>

Retrieving the Value of a Checked Checkbox in Angular

Answer №1

Answer №2

Similar questions

How can I prevent duplicate IDs when submitting a form through AJAX within a while loop?

Confirm the textarea in a form using jQuery

`Receiving JSON data using AngularJS and Ionic: Fixing Errors`

Utilizing Bootstrap's Multi-Grid System

``In Internet Explorer, the function to swap the image source when hovering over the parent element

The NextJS App directory consistently stores the retrieved data in the cache, regardless of any no-cache options that may have been configured

Juggling Asynchronous GET Requests in JavaScript?

Strategies for avoiding asynchronous behavior in AJAX with JQuery

Leveraging ES6 Classes for AngularJS 1.5 service implementation

Having trouble getting the Babel plugin transform-remove-console to function properly with the Vue CLI 4 and @vue/cli-plugin-babel/preset?

Incorporating JSON into a ColdFusion program

What is the best method for sending JSON data to an ASP Server through AJAX?

Revamping the code within the controller

Unlocking the power of Angular Bootstrap UI in your controller

Is there a way to halt or end an interval within a function triggered by useEffect()?

Sending data to a modal within a loop

Stop users from repeating an action

Javascript functions triggering repeatedly

Issue encountered with sortable table in list.js

How can I customize the ngSrc directive in Angular to include a request header?