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

WITH STOP / START BUTTON

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

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

var index = 1;

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

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

Answer 3

试试这个：

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 4

无限循环：

<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 5

纯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 6

您可以在此处查看如何设置延迟setTimeout：

setTimeout( expression, timeout )

e.g。

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

在这里您可以看到如何检查：

http://jsfiddle.net/P6BZY/

结合这两个和'尤里卡！'！

Answer 7

基本上定时器每秒触发checkRadio（）函数，并且该函数根据变量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);

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

7 个答案: