jquery检查无线电输入不起作用

Question

我在用JQuery检查无线电输入时遇到了问题。我才刚开始学，所以请容忍我。

我有4个单选按钮，我希望能够滚动通过使用点击。问题是我只能让第一个if语句起作用。这是我的html：

<a class="back"> < </a>
  <input type="radio" name="radio-control" id="radio-1" checked="checked"/>
  <input type="radio" name="radio-control" id="radio-2"/>
  <input type="radio" name="radio-control" id="radio-3"/>
  <input type="radio" name="radio-control" id="radio-4"/>
<a class="next"> > </a>

我的JQuery：

if($('#radio-1').is(':checked')) { 
  $('.next').click(function() {
    $("#radio-2").prop("checked", true)
  });
}
if($('#radio-2').is(':checked')) { 
  $('.next').click(function() {
    $("#radio-3").prop("checked", true)
  });
  $('.back').click(function() {
    $("#radio-1").prop("checked", true)
  });
}
});

这里是关于codepen：http://codepen.io/anon/pen/LpGOqq的

如果有人能提供一些投入，我们将不胜感激。

Answer 1

检查checked状态，然后绑定事件是做这件事的脏方法。

您可以为prev/next按钮提供简单的单击事件，在该按钮中，您将选中收音机元素的prev/next元素，并将其设置为true。就像这样：

$('.next').click(function () {
    $(":checked").next().prop("checked", true)
});
$('.back').click(function () {
    $(":checked").prev().prop("checked", true)
});

工作演示