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

Question

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.

css angularjs checkbox onclick

Answer 1

Answer №1

Check out this demonstration - please keep in mind:

Make sure to properly link the label to the input using id and for when toggling a radio button / checkbox.
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!

Answer 2

Check out this demonstration - please keep in mind:

Make sure to properly link the label to the input using id and for when toggling a radio button / checkbox.
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!

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

Answer №1

Similar questions

What is the best way to dynamically set the 'selected' attribute in HTML dropdown options using AngularJS data?

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

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

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

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

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

Unable to locate the sibling element using CSS Selector with Selenium

I am interested in deleting an element from Firebase using JavaScript

$routeProvider - providing controller dependencies based on the URL path

Align text in the center of a static container

Using AngularJS to extract values from deeply nested JSON structures

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

Leverage require.js in combination with angular.js

Progress Bar Modules

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

Retrieve the identifying token for a newly generated entry

Completing Forms Automatically with AngularJS

Import necessary styles into the shadow DOM

Nested ng-repeat for dynamic variable rendering

Check out this Angular demonstration page!