Change input radio checked by Jquery

Question

Change input radio checked by Jquery

Navigation

#1 by (1 votes)

1

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

More than just now (using it on a client) I saw that it was very annoying because it's static having to click on the icons to change imgs

I wanted to do the animation with CSS3, but I could not mount animation. If anyone knows how to do it 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: link An example of it in use is this: spflbrasil.com

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

Could someone help me?

jquery css3 css-animations slider

asked by anonymous 15.03.2017 / 20:46

1 answer

Data in listview (uwp) No Netbeans works, no Jar

score 1 · Accepted Answer

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

First, to understand setInterval : link

Then, take a look at jQuery to understand a little better how it works: link

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><inputname="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />
<input name="radio" type="radio" />