Clicking a href selects hidden radio button

Question

I'm trying to implement a plans page. In this page a user can only select one plan obviously. So I have a form that has radio buttons representing each plan. But Radio buttons are ugly right!? So I'm trying to hide them behind a regular a href styled nicely. Is it possible to have an a href actually select a radio button on it's behalf? Here is my code:

HTML:

  <label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug" value="trial" />
    <a href="#" class="button" id="free">Select</a>
  </label>

So for for the radio button I'm use display: none; to hide the radio button then trying to select that button when a user clicks the a href that below the radio button. How can I achieve this?

Answer 1

You can add a class to all checkbox example check. Looking at the structure of your html, if the input sibling is next to the anchor tag you can add a click event to all anchor.when the event fires, the anchor will check their sibling-checkbox.

Snippet below without the checkbox hidden

all_anchor=document.getElementsByClassName("button");
for(var x=0;x<all_anchor.length;++x){
all_anchor[x].addEventListener("click",function(){
this.previousElementSibling.checked=true;
})
}

a{
padding:30px;
background:red;
border:solid red;
border-radius:10px;
text-decoration:none;
}

<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug1" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>
<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug2" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>
<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug3" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>

Snippet below where all input box are hidden but checked by the anchor tag

all_anchor = document.getElementsByClassName("button");
for (var x = 0; x < all_anchor.length; ++x) {
  all_anchor[x].addEventListener("click", function() {
    this.previousElementSibling.checked = true;
    console.log("input sibling is checked")
  })
}

a {
  padding: 30px;
  background: red;
  border: solid red;
  border-radius: 10px;
  text-decoration: none;
}

.check {
  display: none;
}

<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug1" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>
<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug2" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>
<label class="plans__trial__actions">
    <input type="radio" id="trial" name="slug3" value="trial" class="check"/>
    <a href="#" class="button" id="free">Select</a>
  </label>