Javascript Form How to - Cycle the selected radio buttons, select and unselect

Question

We would like to know how to cycle the selected radio buttons, select and unselect.

Answer


  <!--from  w  ww  .  ja  v a  2 s  . c om-->
<html> 
<head> 
<script type="text/javascript"> 
function getSelectedButton(buttonGroup){ 
    for (var i = 0; i < buttonGroup.length; i++) { 
        if (buttonGroup[i].checked) { 
            return i; 
        } 
    } 
    return 0; 
} 

function cycle(form) { 
    var i = getSelectedButton(form.sizes); 
    if (i+1 == form.sizes.length) { 
        form.sizes[0].checked = true; 
    } else { 
        form.sizes[i+1].checked = true; 
    } 
} 
</script> 
</head> 
<body> 
    <form> 
        <input type="radio" name="sizes" value="3" checked="checked" />3
        <input type="radio" name="sizes" value="2" />2
        <input type="radio" name="sizes" value="0" />0
        <input type="radio" name="sizes" value="1" />1
        <input type="button" name="Cycler" value="Cycle Buttons" onclick="cycle(this.form)" />
    </form> 
</body> 
</html>

The code above is rendered as follows: