Show and hide a division based on the status of a checkbox

I have a specific requirement regarding authentication modes. When selecting a single factor, only one type of authentication mode can be chosen at a time and the corresponding div will be displayed. However, when selecting multiple factors, I should be able to choose two authentication modes. The issue I am facing is that when I select two authentication modes, only the first checked div is displayed while the second one remains hidden. How can I ensure that both divs are displayed when two options are selected?

Here is what I have tried so far: 


if ($('#chkOTP').is(':checked')) {
    $('#OTPMain').show();
} else if ($('#chkVoicePrint').is(':checked')) {
    $('#VoicePrintEmailCampMain').show();
} else if ($('#chkPersonInfo').is(':checked')) {
    $('#RandomAuthMain').show();
} else if ($('#chkPastHis').is(':checked')) {
    $('#PastHistoryMain').show();
} else if ($('#chkSQ').is(':checked')) {
    $('#SqQuestionMain').show();
}

Thank you for your help.

javascriptjqueryhtmlcss

Answer №1

For optimal performance and functionality, use individual 'if' statements rather than 'else if' when handling multiple checkboxes.

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } 
    if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } 
    if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } 
    if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } 
    if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

Answer №2

To streamline your code, consider adding a class to your divs that corresponds to the checkbox value. By doing this, you can simplify your jQuery click function like so:

<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>

$('input:checkbox').on('click',function(){
    if($(this).is(':checked'))
    {
        $('.'+$(this).val()).show();
    } else {
        $('.'+$(this).val()).hide();
    }

});

Check out the demo here: http://jsfiddle.net/calder12/jRZBX/1/

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

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

htmlcss

What's the best way to arrange my containers for optimal placement?

I'm attempting to create a Thymeleaf template for rendering a printable PDF. Here is what I currently have: <html xmlns:th="http://www.thymeleaf.org" > <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

htmlcssthymeleaf

Modify content on a link using AngularJS

Currently, my setup looks like this: HTML Code <div ng-app="home" ng-controller="customersCtrl"> <div ng-bind-html="home" id="content">{{content}}</div> </div> JS Code angular.module('home', []).controller('c ...

javascriptangularjs

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

asp.netjavascripthtmlcssvisual-studio-2008

Utilizing jQuery AJAX with a plethora of dynamically created div elements

Within my JSP file, I have a series of divs that are created dynamically based on a database value. These divs have ids such as event1, event2, and so on. Let's focus on the div with the id event1. Inside this div, there is a button with the id foll1 ...

jqueryajaxjsp

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

javascripthtmlreactjsstring

A new reference is created when Angular.copy is used

Whenever I attempt to duplicate a new object into an old object using angular.copy, the reference changes. If I try using = or JSON.parse(JSON.stringify(newObj)), the view does not reflect the new value. Is there a solution to this issue? Here is a code ...

javascriptangularjsjson

How can I make this div appear on the screen?

I have recently encountered an issue with a navbar on my webpage. Despite adding all the necessary links, one of them mysteriously disappears from view. It seems to be present when inspected in the console, but it just won't display on the front end. ...

cssreactjs

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

Can you confirm user online status without relying on ajax requests?

Is there a way to display online users/friends without relying on real-time ajax updates? I'm hoping to avoid making repeated ajax requests to the server at set intervals just to check user status. Right now, my application successfully shows online u ...

phpjqueryreal-timeuser-experience

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...

javascripthtml

Executing a function when a specific element is triggered within an ng-repeat in AngularJS

Hey there, I've been grappling with changing the limitTo filter on a specific list, but I'm encountering an issue: whenever I trigger the filter change, it applies to all ng-repeated categories. The function within my main controller is as foll ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Using JavaScript, ensure that a checkbox is selected by setting its specific name and ID as checked

I'm trying to set a checkbox in my HTML file with a specific name and id as checked. How can I accomplish this task? For example: <input type="checkbox" name="myName_1" id="1" value="my Value 1"> my Value 1 I'm aware of document.getEleme ...

javascripthtml

Leverage jQuery to Retrieve Text and Modify

My Content Management System automatically generates a time stamp for when a page was last updated. However, the format it provides is not ideal for my needs. I would like the date to be displayed in the US Standard way - May 24, 2013, without including th ...

javascriptjquery

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

javascriptjqueryhtmlcssbootstrap-4

What is the reason behind the appearance of 'Cannot Get/' when trying to render pug?

Attempting to configure a basic Express server with a simple pug template. Could you kindly point out what I might be doing incorrectly in this setup? 'use strict'; //Require Express var express = require('express'); var app = expres ...

javascriptnode.jsexpresspug

What is the best way to eliminate a particular element from an array produced using the .map() function in

I am experiencing an issue with my EventCell.tsx component. When a user clicks on the component, an event is created by adding an element to the components state. Subsequently, a list of Event.tsx components is rendered using the .map() method. The problem ...

javascriptreactjsarraystypescriptvite

Encountered an error while attempting to access the 'type' property of undefined within the Redux store for an action defined in an external package

In my quest to expand my knowledge of React (coming from an ASP.NET background), I encountered a challenge. I have multiple React applications where I intend to utilize common UI components, so I decided to extract these into a separate npm package. This a ...

javascriptreactjsnpmreduxreact-redux

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

What is the best way to utilize JavaScript in order to eliminate a tag when an option is chosen within an HTML form?

I'm in the process of designing a website for an artist. The website includes a contact form, and I'm currently working on a JavaScript script to remove the hidden class that I applied to the commission rules section. The goal is to make this sec ...

javascripthtmlcssreactjs