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

Question

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

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时尝试选择该按钮。我怎样才能做到这一点？

Answer 1

您可以为所有复选框示例检查添加一个类。查看html的结构，如果输入的兄弟是锚标记的旁边，你可以向所有锚添加一个click事件。当事件触发时，锚将检查他们的兄弟复选框。

以下代码段未隐藏复选框

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以下代码段，其中所有输入框均已隐藏，但已由锚标记检查

＆＃13;

＆＃13;

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")
  })
}

＆＃13;

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

.check {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;