Jquery 添加/删除仅在循环中第一次工作的属性

我试着循环一些单选按钮，一次检查一个，但不幸的是CSS

：checked

CSS选择器只有在我第一次这样做时才起作用

下面的例子是了解我所说内容的最简单方法：

如何使其循环，并使CSS选择器始终工作？我在Chrome中查看它，所以它可能是一个Chrome bug，或者更可能是我在某个地方做错了什么

一些图片：

第一次（黑点是使用

：checked+span

选择的范围，数字是应检查的数组索引）：

第二次：

如果您检查元素，您将看到框正在正确检查

HTML:

JS:

---

使用prop修复了问题，.prop（）而不是.attr（）

以下是修复方法-

更改-

  $(currentInput).attr("checked","true");

到

---

在FF中使用jQuery.1.10.0进行测试

或

currentInput.checked=true

如果您使用的是较新版本的jQuery，则需要使用prop（）而不是attr（）：

$borderWidth: 2px;

body{
  text-align:center;
  font-family: 'Hammersmith One', sans-serif;
}

#notes{
  padding:2em 0;
}

p{
  margin:2em 0;
}

input{
  display:none;
}
input + span{
  border-radius:400px;
  border:$borderWidth solid black;
  background:white;
  display:inline-block;
  margin:10px;
  width: 10px;
  height: 10px;
  position:relative;
  &:after{
    content:'';
    position:absolute;
    top:20px;
    left:-$borderWidth;
    border-radius:400px;
    border:2px solid black;
    background:white;
    display:inline-block;
    width: 10px;
    height: 10px;
    position:relative;
  }
}

input.clap + span{
  background:#16ab68;
  &:after{
    background:#16ab68;
  }
}

input:checked + span{
  background:#000;
  &:after{
    background:#000;
  }
}

var bpm = 130;
var intervalGap = 60000 / bpm;
var tick = true;

var phraseLength = 12;
var current = phraseLength - 1;

setInterval(function(){  
  current += 1;
  if(current >= phraseLength){
    current = 0;
  }

  $("#notes input").removeAttr("checked");

  var currentInput = $("#notes input")[current];

  $(currentInput).attr("checked","true");

  $("#output").html(current);

},intervalGap);

$(currentInput).prop("checked",true);

  $(currentInput).attr("checked","true");

  $(currentInput).prop("checked","true");