Question

I have been stuck with a code for a few days, and what I’m really trying to do is to append NEXT and PREVIOUS (link/button) on a radio button.

    <div id="slides">
        <ul class="options-list">
            <li>
            <input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
            <input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
            <input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
        </ul>
    </div>

    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>  

what I am trying to do here is that, when i click on next, it will select the radio button below it, so the code above has bundle-73, bundle-72 and bundle-74, says if the default selected is bundle-73, when i click next, it should select bundle-72.

Answer 1

Your HTML looks broken so I’m going to assume you really mean this:

<div id="slides">
    <ul class="options-list">
        <li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
        <li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
        <li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
    </ul>
</div>

Then your next action would look like this:

$('#next').click(function() {
    var $all     = $('.getradiotomove');          // Get them all
    var $current = $('.getradiotomove:checked');  // Get the current one

    var index = $all.index($current) + 1;         // Find the index of the next one
    if(index >= $all.length)                      // Wrap around at the end
        index = 0;
    $($all[index]).attr('checked', 'checked');    // Check it.
});

Demo: http://jsfiddle.net/ambiguous/hTgv3/1/

This assumes that you only have the one group of radio buttons.

You should be able to sort out the previous action yourself.

References:

• :checked selector
• index function