Jqueryラジオボタンの問題

Question

私はいくつかのラジオボタンがついています。私はラベルを削除する場合

以下のコードは絶対に正常に動作します - 。問題は、私はそこに、彼らはしている正確な場所にあるようにラベルを必要です

基本的に私は、ラジオボタンのリストを持っているし、私は、それぞれをループして、順番にチェックするように設定する関数を実行しようとしています。

ユーザがラジオボタンをクリックすると、シーケンス全体が停止するはずです。私がラベルなしで言及したように、これはうまくいきますが、現時点では番号1をチェックしてから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 - 変数Wを添加

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

orks。これは何ですか？

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/