Capture the checked checkbox value and store it as a string

Question

Capture the checked checkbox value and store it as a string

Is there a way to save the value from a checkbox into a string?

 <label style="color:black; text-decoration:none; font-size:15px" href="#">
                  <input type="checkbox" ng-model="diet.v1" ng-true-value="'&diet=high-fiber'" ng-false-value="''" />High-Fiber</label>

I am trying to figure out how to extract the value from ng-true-value when the checkbox is checked, and store it in a string for later use. However, using console.log(diet.v1); in JavaScript does not seem to work. Any suggestions on how to achieve this?

javascript angularjs

Answer 1

Answer №1

Take a look at this demonstration code featuring the ng-true-value and ng-false-value directives.

 <!doctype html>
        <html lang="en">
        <head>
          <meta charset="UTF-8>
          <title>Sample - example-checkbox-input-directive-production</title>
          
        
          <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
          
        
          
        </head>
        <body ng-app="checkboxExample">>
          <script>
          angular.module('checkboxExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
              $scope.diet = {
               v1 : ''
             };
            }]);
        </script>
        <form name="myForm" ng-controller="ExampleController">
          <label>Value:
            <input type="checkbox" ng-model="diet.v1"
                   ng-true-value="'&diet=high-fiber'" ng-false-value="''">
           </label><br/>
          <tt>value = {{diet.v1}}</tt><br/>
         </form>
        </body>
        </html>

Answer 2

Take a look at this demonstration code featuring the ng-true-value and ng-false-value directives.

 <!doctype html>
        <html lang="en">
        <head>
          <meta charset="UTF-8>
          <title>Sample - example-checkbox-input-directive-production</title>
          
        
          <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
          
        
          
        </head>
        <body ng-app="checkboxExample">>
          <script>
          angular.module('checkboxExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
              $scope.diet = {
               v1 : ''
             };
            }]);
        </script>
        <form name="myForm" ng-controller="ExampleController">
          <label>Value:
            <input type="checkbox" ng-model="diet.v1"
                   ng-true-value="'&diet=high-fiber'" ng-false-value="''">
           </label><br/>
          <tt>value = {{diet.v1}}</tt><br/>
         </form>
        </body>
        </html>

Capture the checked checkbox value and store it as a string

Answer №1

Similar questions

What is the best way to monitor a variable using the controllerAs syntax in Angular?

Is it possible for elasticsearch to calculate a cumulative total for a numerical field as it runs?

Integration issue: React.js is failing to render within a Django project

Error: Failed to cast value "{ email: 'example@email.com' }" to ObjectId (type Object) for the "_id" path in the "User" model

When Vue.js Vuex state changes, the template with v-if does not automatically refresh

The type 'Dispatch<SetStateAction<boolean>>' cannot be assigned to type 'boolean'

Utilizing socket.io and NodeJS to manage turns in a turn-based gaming scenario

Small collapse Bootstrap navbar on col-sm width

Retrieve request body/header variables in JWT strategy using Nest JS

Express.js Issue: Error in JSON Object Returned When Date Parameter is Empty

The initial output of the object yields an undefined value

Tips on personalizing chosen date formats within the Mantine DatePicker?

- "Is it possible to extract values from an optional variable?"

What is the meaning of this CSS acronym?

What is the proper way to provide parameters in a GET request using Axios?

AngularJS is throwing a RangeError, indicating that the time value is invalid when calling Date.toISOString

updating react state based on filtered redux properties

Validation does not occur when the submit button has an ng-click event attached to it

Is there a way to incorporate tailwind classes into each react component when utilizing the map() function?

What is the best approach to managing undefined properties retrieved from the html in my Angular application prior to obtaining data from my controller?