Toggle radio buttons test

HTML

<button>Activate next</button>
<span class="optionRadioButton">
    <input id="i1" name="radio-group" type="radio"/><label for="i1">Small</label></span>
<span class="optionRadioButton">
    <input id="i2" name="radio-group" type="radio"/><label for="i2">Medium</label></span>
<span class="optionRadioButton">
    <input id="i3" name="radio-group" type="radio"/><label for="i3">Large</label></span>

JavaScript

$("input").on("change", function( e ) {
    $(document.body).append("<br />" + e.type + " " + e.target.tagName + " " + e.currentTarget.tagName + " " + $(e.currentTarget).attr("id"));
});

var radioButtons = [];
var currentIndex = 0;

// Toggle function
var toggleRadioButton = function() {
    if (++currentIndex >= radioButtons.length) {
        currentIndex = 0
    }
    
    radioButtons[currentIndex].prop('checked', true).click();
}

// Find all radiobuttons
$('.optionRadioButton input:radio').each(function(idx,el){
    radioButtons.push($(this));
});

$("button").bind('click', function () {
    toggleRadioButton();
});