问题描述：

我试图实现一个计划页面。在这个页面中，用户显然只能选择一个计划。所以我有一个表单，它具有代表每个计划的单选按钮。但单选按钮很丑陋！所以我试图把它们隐藏在一个很好的常规href后面。有可能有一个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，下面的单选按钮。我怎样才能做到这一点？

*“但单选按钮很难看！” - - 没有。 – nnnnnn

我不是前端人，所以我问的问题。但我从来没有见过漂亮的单选按钮。但我确定他们在那里。 – Bitwise

是的，我的评论不是很有建设性。无论如何，你能否请你的问题显示单选按钮的实际HTML而不是服务器端的''代码 - 如果他们只能复制你的HTML，那么人们可以更容易地在他们的答案中包含演示。还要注意的是，只要点击标签就可以选择与其关联的单选按钮，您可以对标签进行样式设置而不是添加锚点。 – nnnnnn

答

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

片段没有隐藏

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>

检查210

点击一个href选择隐藏的单选按钮

HTML：

相关推荐