如何将单选按钮的父 DIV 设置为看起来像卡片？

Question

When I select a radio button I want the wrapper parent div to style to border: 1px solid #color to look like a card. They way I did it with JavaScript works, but the code doesn't seem clean, ig?

There has to be a better way to do this, since I have seen this type of card-design in many websites before. How would you guys do select the parent div of the particular button the user clicks? Would you use JavaScript?

 const form = document.querySelector("form") const parentDivs = document.querySelectorAll(".parentDiv") form.addEventListener("change", e => { parentDivs.forEach(parent => { if(parent.getAttribute("aria-parent") == e.target.id) { parent.classList.add("selected") }else { parent.classList.remove("selected") } }) })

 .parentDiv { display: flex; align-items: center; cursor: pointer; border: 1px solid #eee; margin-bottom: 2rem; } .selected { border: 1px solid green; }

 <h1>Select any of the button</h1> <form> <label for="radio1"> <div class="parentDiv" aria-parent="radio1"> <input type="radio" name="radios" id="radio1"> <div> <h2>Desk Stand 1</h2> <p>Some Dummy Text</p> </div> </div> </label> <label for="radio2"> <div class="parentDiv" aria-parent="radio2"> <input type="radio" name="radios" id="radio2"> <div> <h2>Desk Stand 2</h2> <p>Some Dummy Text</p> </div> </div> </label> <label for="radio3"> <div class="parentDiv" aria-parent="radio3"> <input type="radio" name="radios" id="radio3"> <div> <h2>Desk Stand 3</h2> <p>Some Dummy Text</p> </div> </div> </label> </form>

Answer 1

I think that this would help you:
Codepen preview

HTML

<form class='form'>
  <label for="radio1">
    <div class="parentDiv" aria-parent="radio1">
      <input type="radio" name="radios" id="radio1">
      <div class ='flex'>
        <h2>Desk Stand 1</h2>
        <p>Some Dummy Text</p>
      </div>
    </div>
  </label>
  
  <label for="radio2">
    <div class="parentDiv" aria-parent="radio2">
      <input type="radio" name="radios" id="radio2">
      <div>
        <h2>Desk Stand 2</h2>
        <p>Some Dummy Text</p>
      </div>
    </div>
  </label>
  
  <label for="radio3">
    <div class="parentDiv" aria-parent="radio3">
      <input type="radio" name="radios" id="radio3">
      <div>
        <h2>Desk Stand 3</h2>
        <p>Some Dummy Text</p>
      </div>
    </div>
  </label>
</form>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body{ 
  font-family: 'Poppins', sans-serif;
}
.form {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

#selected {
  border: 2px solid green;
  background: rgba(66, 245, 117, 0.2);
  transition: all .3s ease-in-out;
}

.parentDiv {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  border: 2px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}

JavaScript

const form = document.querySelector("form")
const parentDivs = document.querySelectorAll(".parentDiv")

form.addEventListener("change", e => {
  parentDivs.forEach(parent => {
    if(parent.getAttribute("aria-parent") == e.target.id) {
      parent.setAttribute('id','selected')
    }else {    parent.removeAttribute('id','selected')
    }
  })
})

Note:- Please change the styles to give it a more fresh look.