单击 href 选择隐藏的单选按钮

Question

我正在尝试实施计划页面。在此页面中，一个用户显然只能 select 一个计划。所以我有一个表单，其中包含代表每个计划的单选按钮。但是单选按钮很丑吧！？所以我试图将它们隐藏在样式很好的常规 href 后面。是否有可能代表它有一个 href 实际上 select 单选按钮？这是我的代码：

HTML:

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

因此，对于单选按钮，我使用 display: none; 隐藏单选按钮，然后在用户单击单选按钮下方的 href 时尝试 select 该按钮。我怎样才能做到这一点？

Answer 1

您可以向所有复选框示例检查添加 class。查看您的 html 的结构，如果输入的同胞在锚标记旁边，您可以向所有 anchor.when 添加点击事件，事件触发时，锚将选中它们的同胞复选框。

下面没有隐藏复选框的代码段

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>

下面的代码段，其中所有输入框都被隐藏但被锚标记选中

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>

单击 href 选择隐藏的单选按钮

Clicking a href selects hidden radio button

html

javascript

jquery

radio

HTML: