javascript - Check radio buttons in a loop with a delay - Stack Overflow

admin管理员组

文章数量:1415119

i've got three radio buttons within the same group. The first one has a checked="checked", other two are disabled: jsfiddle

Is it possible (using Jquery or javascript) to:
- check the next button in group automatically (with unchecking the previous one) with a 2sec delay, then check's next and so on until it reaches the last radio,
- then loops back to the begining (the first radio) and starts checking again?

Thanks for any help.

Edit: Update fiddle with the code i've got so far: jsfiddle

i've got three radio buttons within the same group. The first one has a checked="checked", other two are disabled: jsfiddle

Is it possible (using Jquery or javascript) to:
- check the next button in group automatically (with unchecking the previous one) with a 2sec delay, then check's next and so on until it reaches the last radio,
- then loops back to the begining (the first radio) and starts checking again?

Thanks for any help.

Edit: Update fiddle with the code i've got so far: jsfiddle

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 23, 2014 at 13:41 g5wx asked Jan 23, 2014 at 13:34 g5wxg5wx 73011 gold badge1010 silver badges3131 bronze badges 4

• 5 yes it is possible.... – Arun P Johny Commented Jan 23, 2014 at 13:36
• first: you are using the same id three times, second: the other inputs are not disabled, third: you can do it with an interval function. what code do you have so far? – Alex Commented Jan 23, 2014 at 13:38
• yep, i've fixed the id's. Also updated the fiddle with all i have so far. I'm not good with javascript, so i don't know how to proceed from here. – g5wx Commented Jan 23, 2014 at 13:42
• id's should be different means we can do – sree Commented Jan 23, 2014 at 13:46

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

The HTML:

<input id="test-1" type="radio" name="testing" checked />
<input id="test-2" type="radio" name="testing" />
<input id="test-3" type="radio" name="testing" />

The JS (include jQuery):

setInterval(function(){
    $('input')
       .eq( ( $('input:checked').index() + 1 ) % 3 )
       .prop( 'checked', true );
},2000);

( $('input:checked').index() + 1 ) % 3 will return 0, 1, or 2 and the corresponding radio button will be checked.

setInterval() runs the function inside each 2000 milliseconds.

JSFIDDLE

WITH STOP/START BUTTON

The HTML:

<input id="test-1" type="radio" name="testing" checked />
<input id="test-2" type="radio" name="testing" />
<input id="test-3" type="radio" name="testing" />
<br /><br />
<a href="#" id="start">Start</a>
<a href="#" id="stop">Stop</a>

The JavaScript:

var intervalID; //global scope

function startCycle(){

    intervalID = setInterval(function(){
       $('input').eq( ( $('input:checked').index() + 1 ) % 3 ).prop('checked', true);
    },2000);

}

function stopCycle(){
    clearInterval(intervalID);
}

$('#start').click(function(e){
    e.preventDefault();
    startCycle(); 
});

$('#stop').click(function(e){
    e.preventDefault();
    stopCycle();
})

JSFIDDLE

Here I assigned an interval ID to the loop each time the function startCycle is triggered and then used clearInterval() to stop the loop with that particular interval ID.

Pure Javascript (short) version: -FIDDLE-

function Check_next() {
    var wanted = document.getElementsByName("testing");
    for (var i = 0; i < wanted.length; ++i) {
        if (wanted[i].checked == true) {
            if (i == wanted.length - 1)
            {
                wanted[0].checked = true;
            } else {
                wanted[i + 1].checked = true;
            }
            break;
        }
    }
}

setInterval(function () {
    Check_next()
}, 1000)

First, you need to have JQuery included in your project. Second, use this script:

var index = 1;

var change = function () {
    setTimeout(function () {
        if (index > 3) 
            index = 0;
        $("#test-"+index).click();
        index++;
        change();
    },
    2000);
}

$(function () {
    change();
});

Try this:

function checknext(){
checkedbutton=$('input[name=testing]:checked');
if($(checkedbutton).is(':last-child'))
    $('div input').first().prop("checked", true );
else
  $(checkedbutton).next().prop("checked", true );
}

setInterval(function(){
  checknext();
},2000)

Working Fiddle

Infinite loop:

<div id="input-wrapper"><input type="radio" name="testing" checked="checked" />
<input disabled="disabled" type="radio" name="testing" />
    <input disabled="disabled" type="radio" name="testing" /></div>

(function($) {
    $(function() {
        var inputs = $('#input-wrapper').find('input'),
            delay = 1000,
            index = 0,
            change = setInterval(function() {
                if (index >= inputs.length) index = 0;
                inputs.removeAttr('checked').not(inputs.eq(index)).attr('disabled', 'disabled');
                inputs.eq(index).removeAttr('disabled').attr('checked', 'checked');
                index++;
            }, delay);
    });
})(jQuery);

please note that newer version of jquery use the prop method instead of attr

working fiddle

Here you can see how to set a delay, setTimeout:

setTimeout( expression, timeout )

e.g.

setTimeout(alert("Hello"), 2000);

Here you can see how to check:

http://jsfiddle/P6BZY/

Combine this two and ‘Eureka!’!

basically the timer triggers the checkRadio() function each second, and the function sets the radio button to active according to variable i

var i = 1;

function checkRadio(){
    $("#test-" + i).prop("checked", true)
    if(i == 3){
        i = 0;
    }else{
        i++;
    }
}

var timer = window.setInterval(function(){
    checkRadio();  
},1000);

本文标签： javascriptCheck radio buttons in a loop with a delayStack Overflow