Change radio input checked by Jquery

Question

I have one more question here on the forum rs. I created a css framework, made a slider with input radio + label but had not put animation (change from second to second between them).

But only q now (using it on a client) I saw that it was very annoying because this static having to the person click on the arrows to change imgs

I wanted to do the animation with CSS3, but I couldn’t do the animation. If anyone knows how to do in CSS3 or Jquery could help me.

<div id="slider" class="slider-danger">
    <input name="slider" id="slider1" type="radio">
    <input name="slider" id="slider2" type="radio">
    <input name="slider" id="slider3" type="radio">
    <input name="slider" id="slider4" type="radio">
    <input name="slider" id="slider5" type="radio" checked="checked">

    <article id="slide1">
        <img src="imgs/slider/sliderimg1.jpg">
    </article>

    <article id="slide2">
        <img src="imgs/slider/sliderimg2.jpg">
    </article>

    <article id="slide3">
        <img src="imgs/slider/sliderimg3.jpg">
    </article>

    <article id="slide4">
        <img src="imgs/slider/sliderimg4.jpg">
    </article>


    <div id="controls">
        <label for="slide1" class="arrows"></label>
        <label for="slide2" class="arrows"></label>
        <label for="slide3" class="arrows"></label>
        <label for="slide4" class="arrows"></label>
        <label for="slide5" class="arrows"></label>
    </div>

The framework is this: https://github.com/TwoSheep/blackcat An example of it in use is this: spflbrasil.com

What I want is to change check on the radio input from second to second. I know it gives to change . ckecked in jquery, but could not mount for more than two checked.

Someone could help me?

Answer 1

To do a task that repeats itself at constant intervals, you can use the setInterval. There is an example below, just to give a real idea, but I advise you to read the following links:

First, to understand the setInterval: http://nodebr.com/funcoes-temporizadoras-embutidas-no-javascript-settimeout-e-setinterval/

Then take a look at the jQuery to understand a little better how it works: http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

var radioAtivo = 0;
var qtdDeRadios = 5;
var intervaloEntreRadios = 1000; //milisegundos
var radios = $('input');

window.setInterval(function(){
   radios[radioAtivo].checked = true;
   radioAtivo++;
   if (radioAtivo >= qtdDeRadios) radioAtivo = 0;
}, intervaloEntreRadios)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />