Reputation: 33
I'm a little stuck with some radio buttons I have.
The code below works absolutely fine if i remove the labels - The issue is I need the labels to be there and in the exact place they are in.
Basically I've got a list of radio buttons and I'm trying to run a function that loops through each of them setting them to checked one after the other.
When a user the clicks on a radio button the whole sequence should stop. As I mentioned without the labels it works fine whereas at the moment it checks number one and then 3 then loops between these two only.
I hope this makes sense and that somebody can point me in the right direction.
Cheers
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();
})
Cheers
Upvotes: 0
Views: 35
Reputation: 62676
The index
function will give you the place of the current object related to it's container. Since your container have both the label
elements and the input
elements - the place of the current input:checked
is "wrong" by your code.
What you can do is get the index of the checked input related to only the inputs:
$('input').index($('input:checked'))
Check this example:
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>
Upvotes: 2
Reputation: 46
adding a variable works. is this what u needed?
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/
Upvotes: 0