Skip to main content
LGMTL
LGMTL
Inspiring
November 24, 2022
Question

How to display an image based on 2 radio buttons?

  • November 24, 2022
  • 3 replies
  • 907 views

I'm currently using javascript to display an image based on one dropdown menu, but I was wondering if there was a way to display the image based on 2 dropdowns, in other words there are 2 fields A and B and each has a drop down with multiple choices.

A: 1,2,3 B: 1,2,3

If A is 1 and B is 2 then display image12.jpg or something to that effect. Appreciate any help on this, thanks!

 

 

 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 26, 2022

    Using Bootstrap 5x,  does this do what you want?  

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle Collapse</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Bootstrap Toogle Callapse</h1>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" type="button" href="#multiCollapseExample1" role="button">Open 1</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">Open 2</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Open/Close Both</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"> #1 placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body"> #2 placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div>
</div>
</div>
</div>
</body>
</html>

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 25, 2022

    I'm not sure what you're asking.  Radio buttons are on/off or true/false boolean switches.  The radio is off by default.  When clicked it changes to on unless aother radio button is selected.

     

    <!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

</body>
</html>

     

     

    Nancy O'Shea— Product User & Community Expert
    D
    Community Expert
    Daniel KramerCommunity Expert
    Community Expert
    November 24, 2022

    This page has an example that might work for what you are trying to do https://stackoverflow.com/questions/21841042/display-image-depending-on-two-input-radio-buttons/21841439

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices