將下一個和上一個附加到無線電按鈕

Question

我已經堅持了幾天的代碼，而我真正想做的是在單選按鈕上附加NEXT和PREVIOUS（鏈接/按鈕）。

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

我要在此處執行的操作是，當我單擊“下一步”時，它將選擇其下方的單選按鈕，因此上面的代碼具有bundle-73，bundle-72和bundle-74，表示如果選擇的默認值為bundle- 73，當我單擊下一步時，它應該選擇bundle-72。

Answer 1

您的HTML看起來很破損，因此我假設您的意思是這樣的：

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

然后，您的下一個動作將如下所示：

$('#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.
});

演示： http : //jsfiddle.net/ambiguous/hTgv3/1/

假設您只有一組單選按鈕。

您應該可以自己整理上一個動作。

參考文獻：

:checked選擇器
index功能

Answer 2

也許像這樣嗎？

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

和javascript：

$('#next').click(function(){
    $('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
    return false;
});

Answer 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <html lang="es">
   <head>
     <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function() {
                $('#next').click(function() {
                        var checkedOp = $('input[name=bundle_option]:checked')
                        var match = checkedOp.next('input[name=bundle_option]');
                        if (match.length > 0)
                            checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
                    });
                $('#prev').click(function() {
                        var checkedOp = $('input[name=bundle_option]:checked');
                        var match = checkedOp.prev('input[name=bundle_option]');
                        if (match.length > 0)
                            checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
                });
                }                   
            );

       </script>
   </head>
   <body>
  <div id="slides">
            <input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
            <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">
    </div>
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>  
   </body>
 </html>

將下一個和上一個附加到無線電按鈕

問題描述

3 個解決方案

解決方案1
1 已采納 2011-09-21 07:08:42

解決方案2
0 2011-09-21 07:10:00

解決方案3
0 2011-09-21 07:37:53

將下一個和上一個附加到無線電按鈕

問題描述

3 個解決方案

解決方案1 1 已采納 2011-09-21 07:08:42

解決方案2 0 2011-09-21 07:10:00

解決方案3 0 2011-09-21 07:37:53

解決方案1
1 已采納 2011-09-21 07:08:42

解決方案2
0 2011-09-21 07:10:00

解決方案3
0 2011-09-21 07:37:53