偽のラジオボタン1オプションのみ

Question

ラジオボタンの動作をシミュレートしようとしていますが、cssでスタイルを設定しやすくするために、タグとスパンの代わりに入力タグを使用しています。状態の変化をシミュレートすることはできますが、ボタンを1つだけ選択する方法はわかりません。ここで

は「状態の変化」の私のjsです：

function CheckRadioButton() { 
    $(".radio-button").click(function() { 
     if ($(this).hasClass('checked')) { 
      $(this).removeClass('checked'); 
     } else { 
      $(this).addClass('checked'); 
     } 
    }); 
} 

私が何をしたいのですがどのような一つのボタンを選択し、そのクラスを変更した場合、すべての残りの部分は「未選択」であるとしていています。

私が遭遇するもう1つの問題は、このタイプのボタンを使用するいくつかの「カテゴリ」があり、各カテゴリ内の唯一のオプションがほしいということです。たとえば：

<p class="fake-label">Skirt</p> 
      <div class="radio-button-wrapper"> 
       <span class="radio-button"></span> 
       <span>Yes</span> 
      </div> 
      <div class="radio-button-wrapper"> 
       <span class="radio-button"></span> 
       <span>No</span> 
      </div> 

<p class="fake-label">Season</p> 
       <div class="radio-button-wrapper"> 
        <span class="radio-button"></span> 
        <span>Summer</span> 
       </div> 
       <div class="radio-button-wrapper"> 
        <span class="radio-button"></span> 
        <span>Winter</span> 
       </div> 

にはどうすればいいだけでなく、両方を同時に、1 YES/NOの間、唯一の「夏/冬」の間「を選ぶ」ことができるように行うことができます？ （2つだけこれのスパンのためのクラスを持つことができると同時に、「確認」）

ありがとうございました:)

Answer 1

この

FIDDLE

01を試してみてください

類似のカテゴリをグループに追加するにはdivを追加し、下記のようにjqueryコードを更新してください。

HTML

<p class="fake-label">Skirt</p> 
<div class="radio-group"> 
      <div class="radio-button-wrapper"> 
       <span class="radio-button"></span> 
       <span>Yes</span> 
      </div> 
      <div class="radio-button-wrapper"> 
       <span class="radio-button"></span> 
       <span>No</span> 
      </div> 
</div> 
<p class="fake-label">Season</p> 
<div class="radio-group"> 
       <div class="radio-button-wrapper"> 
        <span class="radio-button"></span> 
        <span>Summer</span> 
       </div> 
       <div class="radio-button-wrapper"> 
        <span class="radio-button"></span> 
        <span>Winter</span> 
       </div> 
</div> 

Javascriptを

$(".radio-button").click(function() {   
      $(this).closest('div.radio-group').find(".radio-button").removeClass('checked'); 
      $(this).addClass('checked');    
    }); 

Answer 2

をあなたが他のタグを使用しての自由度と実際の入力のパワーを組み合わせることができます。

.input-wrap { 
 
    position: relative; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"] + label { 
 
    padding-left: 22px; 
 
} 
 

 
input[type="radio"] + label:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 2px solid black; 
 
    border-radius: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
input[type="radio"]:checked + label:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left:3px; 
 
    top: 50%; 
 
    width: 8px; 
 
    height: 8px; 
 
    background-color: #bada55; 
 
    border-radius: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="input-wrap"> 
 
    <input type="radio" name="test" id="option1" checked><label for="option1">Option1</label> 
 
</div> 
 
<div class="input-wrap"> 
 
    <input type="radio" name="test" id="option2"><label for="option2">Option1</label> 
 
</div> 
 
<div class="input-wrap"> 
 
    <input type="radio" name="test" id="option3"><label for="option3">Option1</label> 
 
</div>

それは一種あなたの例で行ったようなクラスを追加/削除のようなものだが、その代わりに我々は現在チェック入力のラベルを選択するために、:checked + labelセレクタを使用し、T私たちは実際の入力（ほとんど）のアクセシビリティと、マークアップを自由に書くことができるようにしています。 そして、最も良いことは、このソリューションはCSSだけであり、ページのセクション全体を非表示にするために使用できます。

PS：

position: absolute; 
left: -99999px; 

EDIT：それは縫い目ので、あなたが本当にしたい私は、いくつかのスクリーンリーダーは、あなたはまだ使用することができます。この問題を解決するために、display: noneで入力を無視すると思うので、私は「ほとんど」と同じアクセス可能性を述べましたこれは役立つはず、この偽-入力を下る：

$(".radio-button").click(function() { 
    $(".radio-button").removeClass('checked); 
    $(this).addClass('checked'); 
});