hrefをクリックすると、非表示のラジオボタンが選択されます

Question

私は計画ページを実装しようとしています。このページでは、ユーザーは明らかに1つのプランしか選択できません。だから私は、各プランを表すラジオボタンを持つフォームを持っています。しかし、ラジオボタンは醜いですね！だから、私はそれらのhrefの後ろに非表示に隠そうとしています。 a 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の構造を見ると、入力兄弟がアンカータグの隣にある場合、すべてのアンカーにクリックイベントを追加できます。イベントが発生すると、アンカーは兄弟チェックボックスをチェックします。

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