选中单选按钮时突出显示按钮答案

【问题标题】：Highlight button when radio button is checked选中单选按钮时突出显示按钮
【发布时间】：2016-09-09 09:08:03
【问题描述】：

一旦选中三个单选按钮之一，我就会尝试突出显示一个保存按钮。

那么一旦用户点击保存按钮，它应该失去高亮类并恢复正常，用户也可以点击取消按钮，保存按钮将失去高亮效果。

 $('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

【问题讨论】：

标签： jquery html css button

【解决方案1】：

您可以使用点击功能来执行此操作。这是我的fiddle

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

【讨论】：

很高兴为您提供帮助。

【解决方案2】：

为什么不在“$('label').click”事件之外为按钮创建'click'事件？

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

【讨论】：

【解决方案3】：

您在if 语句中使用了data() 的setter，而不是getter。您的代码中还有几个语法问题。

要更有效地执行此操作，您可以挂钩到收音机的 change 事件并使用 toggleClass()，如下所示：

$('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" />

【讨论】：