Jquery单选按钮问题

Question

我有点卡住了我的一些单选按钮。

如果我删除标签下面的代码工作绝对没问题 - 问题是我需要的标签，在那里，在确切地点，他们都在

基本上我有一个单选按钮列表我试图运行一个函数，循环它们中的每一个，将它们设置为一个接一个地检查。

当用户单击单选按钮时应停止整个序列。正如我提到的没有标签，它工作正常，而此刻它检查第一个，然后3然后循环这两个之间只。

我希望这是有道理的，有人可以指出我在正确的方向。

干杯

的jsfiddle - https://jsfiddle.net/imchris/9dow1mep/

HTML -

<label for="test-1">label</label> 
<input id="test-2" type="radio" name="testing" class="toggle"/> 
<label for="test-2">label</label> 
<input id="test-3" type="radio" name="testing" class="toggle"/> 
<label for="test-3">label</label> 
<input id="test-4" type="radio" name="testing" class="toggle"/> 
<label for="test-4">label</label> 
<input id="test-5" type="radio" name="testing" class="toggle"/> 
<label for="test-5">label</label> 
<input id="test-6" type="radio" name="testing" class="toggle"/> 
<label for="test-6">label</label> 

JS -

startCycle(); 
var intervalID; 

function startCycle() { 
    intervalID = setInterval(function(){ 
    $('input').eq(($('input:checked').index() + 1) % 6).prop('checked', true); 
    },500); 
} 

function stopCycle(){ 
    clearInterval(intervalID); 
} 

$('.toggle').click(function(e){ 
    stopCycle(); 
}) 

干杯

Answer 1

的index功能会给你与之相关的当前对象的地方的容器。由于您的容器同时包含label元素和input元素，因此当前的input:checked位置在您的代码中是“错误的”。

你可以做的是让相关选中输入的指数只有输入：

$('input').index($('input:checked')) 

检查这个例子：

startCycle(); 
 
var intervalID; 
 

 
    function startCycle() { 
 
     intervalID = setInterval(function(){ 
 
     $('input').eq(( $('input').index($('input:checked')) + 1) % 6).prop('checked', true); 
 
     },500); 
 
    } 
 

 
    function stopCycle(){ 
 
     clearInterval(intervalID); 
 
    } 
 

 
$('.toggle').click(function(e){ 
 
    stopCycle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="test-1">label</label> 
 
<input id="test-2" type="radio" name="testing" class="toggle"/> 
 
<label for="test-2">label</label> 
 
<input id="test-3" type="radio" name="testing" class="toggle"/> 
 
<label for="test-3">label</label> 
 
<input id="test-4" type="radio" name="testing" class="toggle"/> 
 
<label for="test-4">label</label> 
 
<input id="test-5" type="radio" name="testing" class="toggle"/> 
 
<label for="test-5">label</label> 
 
<input id="test-6" type="radio" name="testing" class="toggle"/> 
 
<label for="test-6">label</label>

Answer 2

添加量w兽人。这是你需要的吗？

startCycle(); 
var intervalID; 
i=0; 
    function startCycle() { 
     intervalID = setInterval(function(){ 
     /* $('input').eq(($('input:checked').index() + 1) % 6).prop('checked', true);*/ 

      $('input').eq(i % 6).prop('checked', true); 
      i++ 
     },500); 
    } 

    function stopCycle(){ 
     clearInterval(intervalID);i=0; 
    } 

$('.toggle').click(function(e){ 
    stopCycle(); 
}) 

https://jsfiddle.net/9dow1mep/5/