How to display an image based on 2 radio buttons?

Report · Nov 24, 2022

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!

Report · Nov 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/2184...

Report · Nov 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 & Moderator

Report · Nov 25, 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 & Moderator