Implementing a functionality in Angular.js to automatically populate an input field when a checkbox is checked

Question

Implementing a functionality in Angular.js to automatically populate an input field when a checkbox is checked

My goal is to set the respective input field to a specific value when a checkbox is checked. Below is an example of what I am trying to achieve.

<label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

When the user checks the "Five" checkbox, I want the input field to display the number 5. Similarly, if the user checks the "Ten" checkbox, the input field should show the number 10.

javascript angularjs

Answer 1

Answer №1

utilize ng-true-value="" in a checkbox element

Follow this example

<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="5" ng-false-value="0" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="10" ng-false-value="0" ng-model="color" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

JSFIDDLE

Answer 2

utilize ng-true-value="" in a checkbox element

Follow this example

<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="5" ng-false-value="0" name="favoriteColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-model="color" ng-true-value="10" ng-false-value="0" ng-model="color" name="favoriteColors"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="color" readonly />

JSFIDDLE

Answer 3

Answer №2

It seems like using radio buttons instead of checkboxes would be more appropriate in this scenario (since the color can only be either 5 OR 10). Here's a functional plnkr.

Here is the code snippet:

<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="5"> Five
</label>
<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="10"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="data.color" readonly />

Javascript:

app.controller('MainCtrl', function($scope) {
  $scope.data = { color: '' };
});

Answer 4

It seems like using radio buttons instead of checkboxes would be more appropriate in this scenario (since the color can only be either 5 OR 10). Here's a functional plnkr.

Here is the code snippet:

<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="5"> Five
</label>
<label class="checkbox-inline">
    <input type="radio" name="favoriteColors" ng-model="data.color" value="10"> Ten
</label>
<input type="text" name="color" id="clr" ng-model="data.color" readonly />

Javascript:

app.controller('MainCtrl', function($scope) {
  $scope.data = { color: '' };
});

Answer 5

Answer №3

<label class="checkbox-inline">
    <input type="checkbox" ng-click="chosenColor=5" name="preferredColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-click="chosenColor=10" name="preferredColors"> Ten
</label>
<input type="text" name="colorChoice" id="clrSelected" ng-model="chosenColor" readonly />

https://jsfiddle.net/9v7g3yho/4/

Answer 6

<label class="checkbox-inline">
    <input type="checkbox" ng-click="chosenColor=5" name="preferredColors"> Five
</label>
<label class="checkbox-inline">
    <input type="checkbox" ng-click="chosenColor=10" name="preferredColors"> Ten
</label>
<input type="text" name="colorChoice" id="clrSelected" ng-model="chosenColor" readonly />

https://jsfiddle.net/9v7g3yho/4/

Answer 7

Answer №4

Connect your checkbox selections with the ng-model attribute and then assign values accordingly. Here is an example:

<input type="checkbox" name="favLetters" ng-model="isSelected.A"> A
<input type="checkbox" name="favLetters" ng-model="isSelected.B"> B

In your script:

$scope.isSelected = {};
if ($scope.isSelected.A) {
  $scope.letter = 'A';
}
if ($scope.isSelected.B) {
  $scope.letter = 'B';
}

By using two-way binding, the input value will automatically update as you toggle the checkboxes.

Answer 8

Connect your checkbox selections with the ng-model attribute and then assign values accordingly. Here is an example:

<input type="checkbox" name="favLetters" ng-model="isSelected.A"> A
<input type="checkbox" name="favLetters" ng-model="isSelected.B"> B

In your script:

$scope.isSelected = {};
if ($scope.isSelected.A) {
  $scope.letter = 'A';
}
if ($scope.isSelected.B) {
  $scope.letter = 'B';
}

By using two-way binding, the input value will automatically update as you toggle the checkboxes.

Implementing a functionality in Angular.js to automatically populate an input field when a checkbox is checked

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"React - encountering issues with state being undefined when passing child state up through parent components

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

Using the spread operator in the console.log function is successful, but encountering issues when attempting to assign or return it in a

Guide to using Ajax to load a partial in Ruby on Rails

converting code from JavaScript to Flask and then back to JavaScript, all within a single-page application

Error in Cordova Android Compilation ("unable to locate Build Tools version 24.0.1")

I encountered a TS error warning about a possible null value, despite already confirming that the value

Assign a value to an element based on a specific attribute value

Guide to sorting data by the status value within a JavaScript object?

Tips for effectively retrieving data from the server in Node.js

Google Analytics does not include e-commerce tracking capabilities

Monitor the true/false status of each element within an array and update their styles accordingly when they are considered active

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

Leverage Node.js modules to reassign variable values

Execute the controller function with the value as a parameter

The impact of a variable in a function with XMLHttpRequest

Is there a way to adjust the label size for a material ui TextField component?

Choosing the Right Server Software for AngularJS Web Development

Problem with $http.post() in Angular where Codeigniter is not able to receive data

Creating a Class in REACT