Retrieve information from a selected checkbox

I am working on extracting information from a checked checkbox. Currently, I retrieve data from an API and display it as checkboxes in my code snippet below. Additionally, the code includes a validation to ensure at least one coupon is selected:

vm.sendData = function() {
  vm.apiData = couponApi.get({
    idOrder: vm.idOrder
  })
  .$promise
  .then(function(data) {
    for (var i = 0; i < data.Response.length; i++) {
      data.Response[i].Select = vm.all;
    }
    vm.coupons = data.Response;
    vm.combo = data.Response.length > 0;
  });
}

vm.selectAll = function() {
  vm.all = !vm.all;
  vm.coupons.forEach(function(o) {
    o.Select = vm.all;
  })
}

vm.submit = function() {
  var checked = 0;
  vm.coupons.forEach(function(o) {
    if (o.Select === true)
      checked += 1;
  })
  if (vm.all || checked > 0) {} else if (checked === 0) {
    alert("Select at least one coupon");
  }
}

Could someone guide me on how to access the value of the checked checkbox using only Javascript and AngularJs?

Answer №1

Make sure to establish the checked value upon initializing the control in this manner:

angular.module('checkboxSample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxData = {
       option1 : true,
       option2 : 'ON'
     };
    }]);

Then, you can verify it based on the assigned name for each value. For instance, following the example, the checkbox will display both option1 and option2 when selected.

The explanation in the documentation appears to be fairly simple to understand.

source: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for integrating php script within javascript?

Is it possible to incorporate php scripts into javascript[1] in the same manner as it can be done in html[2]? server.php: <?php echo 'hello World'; ?> client.js (or client.php if needed): function foo() { var i = <?php include ...

Guide to exporting HTML files within the build directory in next.js

Is there a way to export HTML files within the build folder in next.js? After exporting it, I noticed that it generated .js extension files instead of .html files. https://i.sstatic.net/VWG7N.png ...

Determine the height of an image using JavaScript

How can I retrieve the height of an image in a JavaScript function? When I use the code: var image_height = $(image).height(); The value of image_height is 0, even though my image definitely has non-zero height. Is there a different method to accurately ...

Retrieving information from Laravel route using React

In my Laravel application utilizing Laravel Framework 8.83.16, I have implemented the following function: public function checkIdentifier($physicalItem_identifier) { try { $con = "mysql"; $res = DB::connec ...

The code for implementing the "Read More" feature is not functioning as intended

I have been experiencing an issue with the implementation of the "read more" feature on my website. Although the code seems to be functioning properly, it only works after pressing the read more button twice. This particular code is designed to detect the ...

The application experiences crashes when the tablet is rotated, happening while in the development stage

For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...

Display validation in HTML5 only when the form is submitted

Here is the code snippet I am referring to: <input required pattern="[0-9]{5,10}" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Type something')" /> I'm looking for a way to remove o ...

Troubleshooting random array issues in JavaScript and jQuery

I want to create a randomized array with DOM elements, here's what I have so far: var allTargets=$('#target1, #target2, #target3, #target4'); var randomTargets=null; randomTargets = allTargets[Math.floor(Math.random() * allTargets.length)]; ...

In JavaScript, a nameless function is being returned within another nameless function

Can the getNameFun function just return this.name instead of an anonymous function? Is there a reason for this structure? Code Segment 1: var name = "The Window";   var object = {     name : "My Object",     getNameFunc : function(){ ...

What is the process for injecting a module into a configuration file?

I recently came across a code example that demonstrates how to open a modal window in a specific state. You can find the example at: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state Howe ...

Adjusting the dimensions of images by using the percentage width and height relative to the body

On my website, I am displaying two images that are hosted on another company's server. To ensure these images adjust with the size of the browser window, I have set their width and height as a percentage relative to the body. However, the issue arise ...

Create a list with interconnected input fields for duplication

I'm new to javascript and I have a question. I'm working on duplicating a list that has input fields for each option. The duplication is working fine, but the associated input fields are not showing up in the duplicated list. Additionally, I woul ...

Is there a way to determine if a webpage is being accessed from a website or from a local file system?

While this question has been raised in the past, none of the answers provided seem to be accurate. Unfortunately, I am unable to comment on the original question or answers. Thus, following suggestions given to me, I have decided to create a new question. ...

When the document is shifted by an angular function call, the mouseup event fails to trigger

My problem involves an angular function that alters the ng-if state to display the sidebar when the image is clicked. However, upon calling the function and shifting the entire webpage, the mouseup event for the image no longer triggers when I release th ...

Exploring the relationship between two collections in Meteor, specifically using MongoDB for querying by value

Currently, I am developing a social media platform similar to Twitter but have encountered an issue with sorting. Below are the collections I am working with: Tweets: createdAt: Date body: String userId: String Events: createdAt: Date ...

The UI Bootstrap Datepicker requires a second click in order to update the month

I am currently using the UI Bootstrap Datepicker component. An issue arises when I try to select the next month - the datepicker itself updates correctly, but the displayed month name does not change (refer to picture 1 and 2). Interestingly, after select ...

Detecting the clicked link within a React component

My NavBar features a Logo that includes a Link to the Home page "/". The application kicks off from the main page and as per user selections, the UI will adapt accordingly. To offer users a chance to reset everything if they are currently on the Home compo ...

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

Hey everyone, It's been a long time since I started listening, but this is my first post... I have a client who needs a complex feature on their website. They want to merge the content of 3 different pages into one seamless experience for users afte ...

Modifying a nested object within an array in a React component

Dealing with state in my project, but running into a roadblock when it comes to updating the value of state. state= { ingredients: [ {Cheese: 0}, {Bacon: 0} ] } <button onClick={this.add}>ADD</button> ...

Preventing Prepend Scroll: Tips and Tricks

Adding extra content to the top of the body can be frustrating, especially if it pushes everything down as you're trying to read. Is there a way to smoothly prepend this additional content without shifting the page layout, so that it seamlessly appear ...