延迟检查循环中的单选按钮

Question

我在同一组中有三个单选按钮。 第一个有checked="checked"，其他两个被禁用：jsfiddle

是否有可能（使用 Jquery 或 javascript）：
- 延迟 2 秒自动检查组中的下一个按钮（取消选中前一个按钮），然后检查下一个按钮，依此类推，直到到达最后一个收音机，
- 然后循环回到开头（第一个收音机）并再次开始检查？

感谢您的帮助。

编辑：用我目前得到的代码更新小提琴：jsfiddle

Answer 1

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" />

JS（包括jQuery）：

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

( $('input:checked').index() + 1 ) % 3 将返回 0、1 或 2，并且将选中相应的单选按钮。

setInterval() 每 2000 毫秒运行一次函数。

JSFIDDLE

带有停止/开始按钮

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>

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

在这里，每次触发函数startCycle 时，我都会为循环分配一个间隔ID，然后使用clearInterval() 来停止具有该特定间隔ID 的循环。

Answer 2

纯 Javascript（短）版本：-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)

Answer 3

首先，您需要将 JQuery 包含在您的项目中。 其次，使用这个脚本：

var index = 1;

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

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

Answer 4

试试这个：

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

Answer 5

无限循环：

<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);

请注意，较新版本的 jquery 使用 prop 方法而不是 attr

working fiddle

Answer 6

这里你可以看到如何设置延迟，setTimeout：

setTimeout( expression, timeout )

例如

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

这里你可以看到如何检查：

http://jsfiddle.net/P6BZY/

将这两者和“尤里卡！”结合起来！

Answer 7

基本上定时器每秒触发一次checkRadio()函数，该函数根据变量i设置单选按钮为激活状态

变量 i = 1;

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

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