使用外部按钮选择下一个/上一个单选按钮答案

【问题标题】：Select next/prev radio button with external button使用外部按钮选择下一个/上一个单选按钮
【发布时间】：2014-03-27 09:31:25
【问题描述】：

我正在制作一种幻灯片形式，当用户单击下一张图片时，还必须选择单选按钮。我得到了滑动工作，“下一个按钮”也在工作，但我有点卡在“上一个”按钮上。不明白为什么它不起作用。

(fiddle)

这是我目前得到的，HTML：

<form>
<div>
    <div class="button prev">&#60;</div>
    <ul>
        <li>
            <input type="radio" id="choise_1" name="first_choise" checked="checked"/>
            <label for="choise_1">One</label>
        </li>
        <li>
            <input type="radio" id="choise_2" name="first_choise"/>
            <label for="choise_2">Two</label>
        </li>
        <li>
            <input type="radio" id="choise_3" name="first_choise"/>
            <label for="choise_3">Three</label>
        </li>
    </ul>
    <div class="button next">&#62;</div>
</div>
<div>
    <div class="button prev">&#60;</div>
    <ul>
        <li>
            <input type="radio" id="choise_1" name="second_choise" checked="checked"/>
            <label for="choise_1">One</label>
        </li>
        <li>
            <input type="radio" id="choise_2" name="second_choise"/>
            <label for="choise_2">Two</label>
        </li>
        <li>
            <input type="radio" id="choise_3" name="second_choise"/>
            <label for="choise_3">Three</label>
        </li>
    </ul>
    <div class="button next">&#62;</div>
</div></form>

jQuery:

$(document).ready(function(){
$('.prev').click(function(){
    $(this).next().find('input:checked').parent().prev().children('input').attr("checked", true);
    $(this).next().find('input:checked').last().removeAttr("checked");
});

$('.next').click(function(){
    $(this).prev().find('input:checked').parent().next().children('input').attr("checked", true);
    $(this).prev().find('input:checked').eq(0).parent().prev().children('input').removeAttr("checked");
});});

【问题讨论】：

你创建了小提琴工作，现在你的问题是什么？

标签： jquery html radio-button

【解决方案1】：

可以简化为

$(document).ready(function(){
    $('.prev').click(function(){
        $(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);
    });

    $('.next').click(function(){
        $(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);
    });
});

演示：Fiddle

同样使用 :has-selector

$(document).ready(function(){
    $('.prev').click(function(){
        $(this).parent().find('li:has(input:checked)').prev().children('input').prop("checked", true);
    });

    $('.next').click(function(){
        $(this).parent().find('li:has(input:checked)').next().children('input').prop("checked", true);
    });
});

演示：Fiddle

【讨论】：

英雄，这行得通！谢谢！将尽可能接受您的回答。
视觉上它可以工作，但是当我在浏览器中查看代码时，第一个输入标签一直具有选中的属性。这会影响结果吗？
@PepijnGieles 不，它没有

【解决方案2】：

您可以使用.prop() 代替.attr()，您可以简化为：

$(document).ready(function(){
   $('.prev').click(function(){
      $(this).next().find(':checked').parent().prev().find('input').prop("checked", true);
   });

   $('.next').click(function(){
      $(this).prev().find(':checked').parent().next().find('input').prop("checked", true);
   });
});

【讨论】：

视觉上它可以工作，但是当我在浏览器中查看代码时，第一个输入标签一直具有选中的属性。这会影响结果吗？
哦！看看您是否在浏览器中看到页面源代码，那么它将向您显示页面加载时可用的默认标记。所以在页面加载时，您的第一个输入已被检查，因此您可以在源代码中看到它，但您必须使用 firebug/chromeinspector 来查看更改。