将下一个和上一个附加到单选按钮

发布于 2024-12-05 19:20:35 字数 862 浏览 1 评论 0原文

我已经被代码困扰了几天，我真正想做的是在单选按钮上附加 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。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剩余の解释 2024-12-12 19:20:35

您的 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/ambigously/hTgv3/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:

回复收藏 0 原文

丑丑阿 2024-12-12 19:20:35

也许是这样的？

<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;
});

Maybe somethining like this?

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

and javascript:

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

回复收藏 0 原文

末蓝 2024-12-12 19:20:35

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

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

回复收藏 0 原文

~没有更多了~