带手风琴的单选按钮，选中的单选按钮不会改变

Question

我正在创建一个单选按钮，按下该按钮将打开带有详细信息的手风琴。我想通了手风琴的创作。但是当我按下其他按钮时 selected/checked 收音机并没有改变，但是他们的手风琴确实打开了但是选择仍然是第一个。我一开始默认第一个。

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

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

Answer 1

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

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

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

Answer 2

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

$(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/

带手风琴的单选按钮，选中的单选按钮不会改变

Radio button with accordion, radio button selected doesn't change

html

javascript

jquery

accordion

jquery-ui-accordion