When the label is clicked, retrieve the value of the checkbox within

I have a checkbox inside a label, and for design purposes, I added a div there. My requirement is to get the checkbox value on the click event of the label. However, I am always getting false whenever the checkbox is clicked.

<label class="text-xs col-xs-4 switch">
  <input type="checkbox" ng-model="inAtlas"> 
  <div class="slider round"></div>                                  
</label>

I would like to retrieve the value of $scope.inAtlas when the label is clicked. Currently, I am always getting false for every click event.

Answer №1

Check out this demonstration - please keep in mind:

  1. Make sure to properly link the label to the input using id and for when toggling a radio button / checkbox.

  2. Initialize the inAtlas value with false (or true if needed) to avoid receiving undefined before toggling the checkbox for the first time.

var app = angular.module("test", []); 
app.controller("test", function($scope){
  $scope.inAtlas = false; /*It's recommended to do this to avoid undefined before toggling the checkbox*/
  $scope.getValue = function(){
    console.log($scope.inAtlas);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="test" ng-controller="test">
  <label class="text-xs col-xs-4 switch" for="check-box">
    <input type="checkbox" ng-model="inAtlas" id="check-box">
    <span class="slider round">Toggle me</span>
  </label>
  <br><br>
  <button ng-click="getValue()">Get checkbox value</button>
</body>

Feel free to reach out if you have any other questions, thank you!

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 best way to dynamically set the 'selected' attribute in HTML dropdown options using AngularJS data?

I'm currently in the process of developing an angularJS application. Below is a snippet of my PHP code: <label class="item item-input item-select"> <div class="input-label">Do you possess the right to work in the UK?</div> & ...

Pass the AngularJS object to a different MVC Controller when a button is clicked in the MVC view

When a button is clicked on the view, I need to pass an AngularJs object to another controller. CHTML <div ng-repeat="hotel in respData.hotels"> <button type="button" class="btn" data-ng-click="setTab(hotel.code)">Check Availability</bu ...

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

I recently came across this directive in AngularJS: productApp.directive('notification', function($timeout) { return { restrict : 'E', replace : true, scope : { type: "@", message: "@ ...

Issue with Navbar collapse button not displaying items on Bootstrap 4.5.0 in combination with Next.js version 9.4.4

I'm currently working on a nextjs demo project where I'm incorporating bootstrap for styling purposes. The initial setup was straightforward as I installed bootstrap using npm and included it in my app.js. import 'bootstrap/dist/css/bootstra ...

How come my customized directive is not taking precedence over the original methods in AngularJS?

Following the guidelines in the Angular Decorator manual (https://docs.angularjs.org/guide/decorators), I attempted to create a directive and apply decoration to it. The directive's purpose is to display the current date and time. I included a (point ...

Centering a form on a webpage with Bootstrap: A step-by-step guide

Utilizing twitter-bootstrap for styling, I have implemented a login form and am attempting to center it on the page. Most suggestions on stackoverflow advise placing elements inside the container class, which is what I have done. The requirement is for t ...

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

I am interested in deleting an element from Firebase using JavaScript

I'm struggling to grasp the concept of deleting an item from my Firebase database. I have successfully created a function (saveEmployee) to add items, but removing them is where I hit a roadblock. HTML <tbody ng-repeat="employee in employees"> ...

$routeProvider - providing controller dependencies based on the URL path

Take a look at the following code snippet: var app = angular.module("app", [], function($routeProvider) { $routeProvider .when("/page1", { controller: "MyController" }) .when("/page2", { controller: "MyController" }) .when("/page3", { contro ...

Align text in the center of a static container

I am facing the challenge of aligning four h4 tags in the center of their respective fixed divs, all set to width: 100% to ensure their background-color: rgba(255, 255, 255, 0.5); covers the entire browser width. Despite trying various combinations of CSS ...

Using AngularJS to extract values from deeply nested JSON structures

I'm currently navigating through a nested JSON object and I'm facing challenges in accessing the sub items within it. Below is a snippet of the JSON file I'm working with. It has successfully passed the JSONLint test, so it should be in pro ...

Could there be an issue with my website's bootstrap where badges are not being applied properly?

Currently, I am in the process of learning ReactJS and running into an issue where my bootstrap is not working within my .jsx file. Despite following a tutorial (MOSH) diligently and extensively researching on stack overflow, I have not been able to find a ...

Leverage require.js in combination with angular.js

Seeking assistance with require.js integration in Angular.js, encountering an error. Below is the code snippet: Configuration file: require.config({ paths: { angular: 'https://code.angularjs.org/1.5.5/angular.min', angularRo ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

Utilizing a drop-down selection menu and a designated container to store chosen preferences

My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...

Retrieve the identifying token for a newly generated entry

I am exploring a function that generates a new movie: createMovie.create({ release_date: releaseNL.release_date, imdb_rating: $scope.movieImdbRating.imdbRating, title: $scope.movieListID.original_title, image: $scope.movieLi ...

Completing Forms Automatically with AngularJS

Hello! I'm just starting out with ng and I need to make an autocomplete textbox that will initiate an AJAX call when the text is changed. The catch is that the minimum length required to trigger the AJAX call is 3 characters. However, once the user en ...

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

Nested ng-repeat for dynamic variable rendering

I am facing an issue where I have a nested ng-repeat directive. I am attempting to create a dynamic second ng-repeat, using a key from the first one, but the current syntax is not working. Is there a different way to achieve this? Perhaps a different nota ...

Check out this Angular demonstration page!

Looking to demonstrate the features of my Angular page using a plugin like intro.js, however, only part of the page is shown upon loading. Users are greeted with an input box to fill out an id and submit before the rest of the page is displayed after makin ...