Question

我正在创建一个单选按钮，按下会打开带有细节的手风琴。我已经想出了手风琴的创作。但是当我按下其他按钮时，所选/已检查的收音机不会改变，但是他们的手风琴确实打开但选择仍然是第一个。我最初将第一个作为默认选择。

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

<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

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

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

运行示例

Answer 2

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

首先，知道点击了哪个单选按钮。
声明同一个班级=＆＃34; radio_class＆＃34;对于所有单选按钮，并使用.change函数来检测更改。
取消选中所有单选按钮（或取消选中以前选中的单选按钮）
检查点击的单选按钮并运行手风琴。

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

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

2 个答案: