带外部按钮的无线电输入控制

Question

您好，我正在使用无线电输入制作幻灯片，并设计了“上一个”和“下一个”按钮来移动幻灯片。但是，我还希望这些按钮也可以检查下一个输入。当前幻灯片移动，但未检查下一个输入。我在这里查看了这个解决方案： Select next/prev radio button with external button 并试图实现它，但我无法让它工作。这是我的代码：

<form action="" method="post">
    <ul class="form-ul" style="position: relative; width: 176px; height: 107px;">                            
      <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 82px; height: 43px;">
        <label>
          <input type="radio" name="term_id" value="59" checked="checked">
        </label>
      </li>
      <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 82px; height: 62px;">
        <label>
          <input type="radio" name="term_id" value="61">
        </label>
      </li>
    </ul>
    <div id="prev" style="float:left;">PREV</div> 
    <div id="next" style="float:right;">NEXT</div>
</form>

JavaScript：

$(document).ready(function(){
  $('#prev').click(function(){
    $('.form-ul').find('li:has(input:checked)').prev().children('input').prop("checked", true);
  });

  $('#next').click(function(){
    $('.form-ul').find('li:has(input:checked)').next().children('input').prop("checked", true);
  });
});

Answer 1

jQuery 的.children() 只查找元素的直接子元素。在您的情况下，单选按钮不是直接子级，因此您需要将其更改为 .find()：

$(document).ready(function(){
  $('#prev').click(function(){
      $('.form-ul').find('li:has(input:checked)').prev().find('input').prop("checked", true);
  });

  $('#next').click(function(){
      $('.form-ul').find('li:has(input:checked)').next().find('input').prop("checked", true);
  });
});

此外，您可以通过减少查询来提高性能。而不是

$('.form-ul).find('li:has(input:checked)')

使用

$('.form-ul li:has(input:checked)')

要使其循环，请检查结果集的length：

$('#next').click(function(){
  var $next = $('.form-ul li:has(input:checked)').next();
  if(!$next.length) $next = $('.form-ul li').first();
  $next.find('input').prop("checked", true);
});

这是fiddle 和circular fiddle