【问题标题】：Clicking a href selects hidden radio button单击 href 选择隐藏的单选按钮
【发布时间】：2023-03-27 05:05:02
【问题描述】：

我正在尝试实施计划页面。在此页面中，用户显然只能选择一个计划。所以我有一个表格，其中包含代表每个计划的单选按钮。但是单选按钮很丑对吧！？因此，我试图将它们隐藏在样式精美的常规 a 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; 隐藏单选按钮，然后在用户单击单选按钮下方的a href 时尝试选择该按钮。我怎样才能做到这一点？

【问题讨论】：

“但是单选按钮很丑对吧！？” - 不。
我不是前端人员，因此我要问这个问题。但我从未见过漂亮的单选按钮。但我敢肯定他们就在那里。
是的，我的评论不是很有建设性。无论如何，您能否请edit 您的问题显示单选按钮的实际 HTML，而不是服务器端 <%= %> 代码 - 如果他们可以复制您的 HTML，则可以让人们更容易在他们的答案中包含演示。另请注意，单击标签将选择其关联的单选按钮，您可能只需设置标签的样式而不是添加锚点。
更新了@nnnnnn。

标签： javascript jquery html radio

【解决方案1】：

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

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

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>

【讨论】：