Tips for displaying or hiding a div based on a checkbox selection using AngularJS

Question

Tips for displaying or hiding a div based on a checkbox selection using AngularJS

I am currently working on incorporating a checkbox and a div element into my webpage.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" 
                            ng-checked="ModelData.Animals == 'A'" />


 <div class="form-group" ng-show="ModelData.Animals == 'A'">

                        <label for="FirstName" class="col-md-9">
                            Are you interested in Animal Liability Coverage?
                        </label>
                        <div class="col-md-3">
                            <label>
                                <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="Y" />
                                Yes
                                <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="N" />
                                No
                            </label>
                        </div>
  </div>

My goal is to have the DIV displayed when the checkbox is selected, and hidden when it is deselected. Initially, the above code works as intended, showing the DIV when the checkbox is selected and hiding it on deselection. However, after the first time, it fails to display the DIV upon selecting the checkbox.

javascript angularjs

Answer 1

Answer №1

If you haven't already, give this method a try! Check out the JSFiddle link for a demonstration.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
  <label for="FirstName" class="col-md-9">
    Would you like to opt for Animal Liability Coverage?
  </label>
  <div class="col-md-3">
    <label>
      <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
      <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
    </label>
  </div>
</div>

Answer 2

If you haven't already, give this method a try! Check out the JSFiddle link for a demonstration.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
  <label for="FirstName" class="col-md-9">
    Would you like to opt for Animal Liability Coverage?
  </label>
  <div class="col-md-3">
    <label>
      <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
      <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
    </label>
  </div>
</div>

Answer 3

Answer №2

It appears that you are in need of utilizing ng-true-value and ng-false-value

<div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>

    <div ng-show="check == 'A'">
        Checked
    </div>
</div>

Fiddle

Answer 4

It appears that you are in need of utilizing ng-true-value and ng-false-value

<div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>

    <div ng-show="check == 'A'">
        Checked
    </div>
</div>

Fiddle

Answer 5

Answer №3

<body ng-app>
     <label>Elephant: <input type="checkbox" ng-model="Elephant" ng-init="checked=true" /></label><br/>
     <label>Giraffe: <input type="checkbox" ng-model="Giraffe" ng-init="checked=false" /></label><br/>
     <label>Zebra: <input type="checkbox" ng-model="Zebra" ng-init="checked=false" /></label><br/> 
     Display when selected:
     <div ng-if="Elephant">
     <span> This is shown when the elephant is checked.
     </span>
     </div>

<div ng-if="Giraffe">
    <span> This is shown when the giraffe is checked.
    </span>
</div>
<div ng-if="Zebra">
    <span> This is shown when the zebra is checked.
    </span>
</div>
</body>

Answer 6

<body ng-app>
     <label>Elephant: <input type="checkbox" ng-model="Elephant" ng-init="checked=true" /></label><br/>
     <label>Giraffe: <input type="checkbox" ng-model="Giraffe" ng-init="checked=false" /></label><br/>
     <label>Zebra: <input type="checkbox" ng-model="Zebra" ng-init="checked=false" /></label><br/> 
     Display when selected:
     <div ng-if="Elephant">
     <span> This is shown when the elephant is checked.
     </span>
     </div>

<div ng-if="Giraffe">
    <span> This is shown when the giraffe is checked.
    </span>
</div>
<div ng-if="Zebra">
    <span> This is shown when the zebra is checked.
    </span>
</div>
</body>

Answer 7

Answer №4

Using ng-model to return true or false for checkbox inputs has been very effective for me. It works flawlessly.

   <div ng-app>
   <div >
      <input type="checkbox" ng-model="check"/>        
  </div>

  <div ng-show="check == true">
     Checked
  </div>

Answer 8

Using ng-model to return true or false for checkbox inputs has been very effective for me. It works flawlessly.

   <div ng-app>
   <div >
      <input type="checkbox" ng-model="check"/>        
  </div>

  <div ng-show="check == true">
     Checked
  </div>

Tips for displaying or hiding a div based on a checkbox selection using AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

An innovative way to display or hide a div depending on the multiple selections made in a select2 jQuery field

JavaScript form validation problem: Warning for identical responses in the MOST and LEAST sections

Bootstrap-enhanced JavaScript table filter functionalities

What is the most effective method to include JSON data containing various IDs at the end within an $http.get() request in AngularJS?

Activate SVG graphics upon entering the window (scroll)

Having trouble fetching data using $http and promises in AngularJS

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Unable to make anchor tag inside button effectively collapse another div

Customize your Shopify Messenger icon using JavaScript!

Is it possible for Laravel to display a login form instead of redirecting to a login page if the user is not authenticated?

How can JavaScript transform Unicode strings?

When using React with Firebase, remember to specify the "to" property when using setState to avoid errors

Developing Android Local Notifications with AngularJS and Ionic

Is there a way to extract information from the HTML source code of an external website and display it in my application?

update angularjs image source based on model updates

Breaking down JavaScript arrays into smaller parts can be referred to

JQuery - The method $(this).find() is not recognized as a valid function

Exploring Inner Textures on a Cylinder in Three.js

Saving incoming text files from a client via a websocket connection: A step-by-step guide