ラジオボタンがチェックされているときにハイライトボタン

Question

3つのラジオボタンの1つがチェックされたら、保存ボタンを強調表示しようとしています。

ユーザーが保存ボタンをクリックすると、ハイライトクラスが失われて標準に戻り、キャンセルボタンをクリックすると保存ボタンが強調表示されなくなります。

$('label').click(function() { 
    $('.greyBtn').addClass('glow'); 
    if ($('.greyBtn').data('clicked', true)) { 
    $('greyBtn').removeClass('glow'); 
    } else if ($('.cancel').data('clicked', true)) { 
    $('greyBtn').remove.Class('glow'); 
    } 
}); 

今すぐラジオボタンをチェックすると保存ボタンがハイライト表示され、ボタンをクリックするとクラスが再び失われることはありません。

jsFiddle

Answer 1

これを行うには、クリック機能を使用できます。 は、ここでの答えとしてマークされたトリックをやった私のfiddle

$('label').click(function() { 
    $('.greyBtn').addClass('glow'); 
}); 
    $('.greyBtn').click(function() { 
    $(this).removeClass('glow'); 
    }); 
    $('.cancel').click(function() { 
    $('.greyBtn').removeClass('glow'); 
    }); 

Answer 2

あなたは代わりにゲッターのif文でdata()のセッターを使用しています。 コードにもいくつかの構文上の問題があります。あなたが「クリック」イベントを作成しないのはなぜ

$('input[type=radio]').change(function() { 
 
    $('.greyBtn').toggleClass('glow', this.checked); 
 
});

@keyframes glowing { 
 
    0% { 
 
     background-color: #B20000; 
 
     box-shadow: 0 0 3px #B20000; 
 
    } 
 
    50% { 
 
     background-color: #FF0000; 
 
     box-shadow: 0 0 20px #FF0000; 
 
    } 
 
    100% { 
 
     background-color: #B20000; 
 
     box-shadow: 0 0 3px #B20000; 
 
    } 
 
} 
 

 
.glow { 
 
    animation: glowing 1500ms infinite; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input name="radio" type="radio">One</label><br/> 
 
<label><input name="radio" type="radio">Two</label> 
 
<label><input name="radio" type="radio">Three</label> 
 

 
<input type="submit" value="Gem" class="greyBtn" /> 
 
<input type="submit" value="Cancel" class="cancel" />

Answer 3

：このように、より効果的にあなたがラジオのchangeイベントにフックし、toggleClass()を使用することができます。これを行うために

"$（ 'label'）の外側のボタンをクリックします。

$('.greyBtn').click(function() { 
     $('greyBtn').removeClass('glow'); 
});