CODEWITHSUNDEEP
jqueryradio-button
Chris Martin
Chris Martin

Reputation: 33

Jquery radio button issues

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

Answers (2)

Dekel
Dekel

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

Steve Fox
Steve Fox

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

Related Questions