HTMLボタンを「ラジオボタン」として使用し、プレス上で別の状態を適用する

Question

これで、フォーム内で「ラジオボタン」としていくつかのボタンを使用するソリューションを探しています。あなたはそれをクリックしたことを知っているので、新しいCSSタグ、背景色などを取得し、選択したフォーム内でタグ付けされます。

基本的に私は以下のものがたくさんあり、本質的にフォームですが、私は「マルチ選択」としてボタンを使用する必要があります。ボタンをクリックするとアクティブになり、ページ。明らかに私が病気のthatsは何が必要だと思うとJavaScriptにオープン

。

Answer 1

jQueryで選択効果を制御できますか？おそらくあなたは、このようなボタンの周りのdivをラップすることができます

<div class="button-div"> 
    <a class="btn-1">Learn More</a> 
    <a class="btn-2">I want this</a> 
    <a class="btn-3">No thanks</a> 
</div> 

次にonclickの機能にこのようなものがありますか？

$('.button-div a').on('click', function(){ 
    var getButton = $(this).attr('class'); 
    $('.button-div a').removeClass('active'); 
    $('.button-div a.' + getButton).addClass('active'); 
} 

それからちょうどアクティブクラスのみラフ

.button-div .active { 
    background: red; 
} 

上のスタイルを持っていますが、うまくいけばできますか？

Answer 2

あなただけhtmlとcssで行うことができます：

は、あなたがラジオボタンを意味

.input-radio{ 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    margin-top: 30px; 
 
} 
 
input[type=radio] { 
 
    display: none; 
 
    } 
 
    input[type=radio] + label { 
 
    padding: 20px; 
 
    border-radius: 40px; 
 
    border: 1px solid #ddd; 
 
    
 
    } 
 
input[type=radio] + label:hover { 
 
    border: 1px solid red; 
 
    } 
 
    input[type=radio]:checked + label { 
 
    border: 1px solid red; 
 
    }

<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div> 
 
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div> 
 
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>