How to give html button a similar functions as a checkbox?

Question

I have three buttons, which are linked to three images (image dimensions, not that it matters: 800x500, 500x300, 290x170). I want those buttons to have a similar feature as checkbox. let me explain:

1. When three of them are clicked, two images should be beside each other, 290x170 should be under those two.
2. If first button is switched off, 290x170 should be on top and 500x300 on bottom.
3. If second button is switched off, on top should be 800x500 image and under that 290x170.
4. If third button is switched off, 800x500 and 500x300 images should be beside each other.
5. default should be 290x170 image.

For now i can click only once, couldn't think of anything on how to make it to make them clickable and unclickable, without checkbox.

Here's my JS function:

 function changeImg(value) {
  switch (value) {
    case 1:
      document.getElementById("image1").style.display = "inline";
      break;
    case 2:
      document.getElementById("image2").style.display = "inline";
      break;
    case 3:
      document.getElementById("image3").style.display = "inline";
      break;
  }
}


<main>
      <div class="main-title">
        <h1>hello from space</h1>
      </div>
      <div class="main-container">
        <div id="sideNav" class="sidenav">
          
          <div class="menu">
            <p>Choose dimensions for an image</p>
            <button class="btn"  onclick='checkValue(1)'>800x500
            </button>
            <button class="btn" onclick='checkValue(2)'>290x170
            </button>
            <button class="btn" onclick='checkValue(3)'>500x300
            </button>
          </div>
        </div>

        <div id="main-content">
            <div class="image-boxes">
                <img src="img/img (1).jpg" id="image1" />
                <img src="img/img (5).jpg" id="image2" />
                <img src="img/img (6).jpg" id="image3" />
              </div>
          </div>
        </div>
      </div>
    </main>

Answer 1

try using radio buttons, create a div and insert your radio buttons within and link to your JavaScript code to switch the image orientation

<div>
   <input type="radio" value="option1">
   <input type="radio" value="option2">
   <input type="radio" value="option3">
</div>