0

のように、ラジオボタン付きのフォームがあります

<label for="challenge" class="fat">Challenge 
    <input type="radio" name="create-what" value="challenge" id="challenge">
</label>
<label for="team" class="fat">Team 
    <input type="radio" name="create-what" value="team" id="team">
</label>

明らかに、ラベルをクリックするとラジオが選択されます。また、ラジオボタンの選択された状態に基づいてラベルのクラスを変更する必要があります。したがって、選択した無線のラベルに「アクティブ」クラスを追加し、無線が選択されていない場合は削除します。

私はこのようなペアをたくさん持っているので、最もポータブルな方法を探していました。ありがとう。

4

1 に答える 1

1

jQueryでは、イベントを監視し、状態changeに基づいてクラスを切り替えることで非常に簡単ですchecked

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
});

toggleClass2番目の引数のブール値を使用して、追加するか削除するかを決定できます。this.checkedtruまたはfalseのいずれかになります。

changeこれをページの読み込み時に実行する必要がある場合は、ページの読み込み時にトリガーするだけです。

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
}).change();
于 2012-11-19T01:37:18.303 に答える