Jquery单选按钮焦点不起作用答案

【问题标题】：Jquery radio button focus not workJquery单选按钮焦点不起作用
【发布时间】：2017-05-25 06:08:37
【问题描述】：

大家好，我正在做一些自定义单选按钮样式，而 css :focus 不起作用。所以我正在寻找一些 js 解决方案，现在我有了这个：

// Focuse radio btn
  function focus() {
   $('.radio, .field-label').focusin(function(e) {
   //console.log(e.target);
   $(e.target).parent().animate({opacity: .5},400);
});

$('.radio, .field-label').focusout(function(e) {
  //console.log('focus out!');
  $('.radio, .field-label').parent().animate({opacity: 1},1000);
});
}

focus();

这适用于 Chrome。但在 safari 或 mozilla 等其他浏览器中，它不起作用。为什么？有什么解决办法吗？谢谢！

【问题讨论】：

你能提供一个可行的例子吗？
如果某个答案解决了您的问题，请考虑接受该答案。以下是meta.stackexchange.com/questions/5234/… 然后返回此处并对勾号/复选标记执行相同操作直到它变为绿色的方法。这通知社区，找到了解决方案。否则，其他人可能会认为问题仍然悬而未决，可能想要发布（更多）答案。您将获得积分，并鼓励其他人帮助您。欢迎使用 Stack！

标签： javascript jquery html css radio-button

【解决方案1】：

试试这个：

function focus() {
    $(document).on('focus', '.radio, .field-label', function(e) {
       //console.log(e.target);
       $(this).parent().animate({opacity: .5},400);
    });

    $(document).on('focusout', '.radio, .field-label', function(e) {
      //console.log('focus out!');
      $(this).parent().animate({opacity: 1},1000);
    });
}

focus();

【讨论】：

【解决方案2】：

您是否尝试过使用简单的 CSS？通过这种方式，您可以设置标签的样式，该标签位于选中的单选按钮之后

input[type="radio"]:checked+label { 
  color: red; 
  font-size: 60px;  
}

<input id="radio1" type="radio"><label for="radio1">Radio 1</label>
<input id="radio2" type="radio"><label for="radio2">Radio 2</label>

【讨论】：

【解决方案3】：

这在 FF 和 Chrome 中运行良好：

$(document).on('focusin', '.radio, .field-label', function() {
  $(this).parent().animate({
    opacity: .5
  }, 400);
});

$(document).on('focusout', '.radio, .field-label', function() {
  $(this).parent().animate({
    opacity: 1
  }, 1000);
});

FIDDLE

【讨论】：