带有手风琴的单选按钮，选择的单选按钮不会改变答案

【问题标题】：Radio button with accordion, radio button selected doesn't change带有手风琴的单选按钮，选择的单选按钮不会改变
【发布时间】：2015-09-20 19:35:57
【问题描述】：

我正在创建一个单选按钮，按下该按钮将打开一个带有详细信息的手风琴。我已经弄清楚了手风琴的创造。但是当我按下其他按钮时，选择/选中的收音机并没有改变，但他们的手风琴确实打开了，但选择仍然是第一个。我最初将第一个作为默认选择。

当我没有实现手风琴时，我能够更改单选按钮之间的选择。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>
 <div class="container-fluid bg-default" id="rides">
    </div>
    <div class="col-md-6 col-md-offset-3 ">
            <fieldset >
                <div id = "accordion">
                    <div class="radio">
                        <input type="radio" name="ride_id" id="radio1" value="1" checked = "checked">
                        <label class="btn-list btn-block btn-xl" for="radio1">
                            <span class="col-sm-5">Los Angeles </span>
                            <span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
                            <span class="col-sm-5">Las Vegas</span>
                        </label>
                    </div>
                    <div>Details of route 1</div>
                    <div class="radio">
                        <input type="radio" name="ride_id" id="radio2" value="2">
                        <label class="btn-list btn-block btn-xl" for="radio2">
                            <span class="col-sm-5">Los Angeles</span>
                            <span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
                            <span class="col-sm-5">San Francisco</span>
                        </label>
                    </div>
                    <div>Details of route 2</div>
                    <div class="radio">
                        <input type="radio" name="ride_id" id="radio3" value="3">
                        <label class="btn-list btn-block btn-xl" for="radio3">
                            <span class="col-sm-5">Los Angeles</span>
                            <span class="col-sm-2"><i class="fa fa-arrows-h"></i> </span>
                            <span class="col-sm-5">Sacramento</span>
                        </label>
                    </div>
                    <div>Details of route 3</div>
                </div>
                <br>
                <div class="row">
                <div class="col-sm-12">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a onclick="" href='#register' class="btn btn-primary btn-xl btn-block page-scroll">Book</a>
                    </div>
                </div>
            </fieldset>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html accordion jquery-ui-accordion

【解决方案1】：

问题似乎是通过附加手风琴点击事件不再到达单选按钮。您可以通过在单击时保存单选按钮并在动画结束时检查它来解决此问题。

$(function() {
    var inputClicked;
    $( "#accordion" ).accordion({
        beforeActivate: function(evt, ui){
            inputClicked = $('input', evt.currentTarget)
            //$('input', evt.currentTarget).prop("checked", "checked");
        },
        activate: function(evt, ui){
           inputClicked.prop("checked", "checked");
        }
    });
 });

在http://jsfiddle.net/hw4vx3cy/1/ 运行示例

【讨论】：

【解决方案2】：

我猜你需要改变你的 jquery。执行以下步骤：

首先，知道单击了哪个单选按钮。
为所有单选按钮声明一个相同的类 class="radio_class"，并使用 .change 函数来检测更改。
取消选中所有单选按钮（或取消选中以前选中的单选按钮）
检查单击的单选按钮并运行手风琴。

访问以下链接： jQuery check/uncheck radio button onclick
参考Jurrie给出的答案。

【讨论】：