0

それぞれにチェックボックスが付いた 3 つのボタンがあります。

<div id="btn_group">
    <button class="btn"><i class="icon-check-empty"></i> One</button>
    <button class="btn"><i class="icon-check-empty"></i> Two</button>
    <button class="btn"><i class="icon-check-empty"></i> Three</button>
</div>

私の現在のjQueryは次のようになります。

$('.btn').on('click',function() {
    $('#btn_group > .btn > i').removeClass('icon-check').addClass('icon-check-empty');
    $(this).children('i').toggleClass('icon-check-empty icon-check');
});

必要なことは次のとおりです。

1) ボタン 1 をクリック: ボタン 1 がチェックされ、他のすべてがチェックされていない

2) ボタン 1 をもう一度クリックします。

3) ボタン 1 をクリックします: (#1 を参照)

4) ボタン 2 をクリック: ボタン 2 がチェックされ、他のすべてがチェックされていない (ラジオ ボタンなど)

基本的に、現在の選択をオフにできるラジオ ボタンのセットが必要ですが、複数の選択は許可されません。すべて JS と jQuery を介してエミュレートされます。手伝ってくれますか？

4

1 に答える 1

2

単一のクラスでそれを行うことができます。

$('.btn').on('click',function() {
    $(this).toggleClass('icon-check').siblings().removeClass('icon-check');
}
于 2013-04-20T00:52:08.980 に答える