Javascript 选中复选框时，Twitter引导3将崩溃

手风琴必须在复选框上折叠。当它被解开时，必须隐藏起来

以下是代码：

为什么它不检查

            <div class="panel-group driving-license-settings" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <input type="checkbox" value=""> I have Driver License  
                            </a>
                          </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="driving-license-kind">
                                <div class="checkbox">
                                    <input type="checkbox" value="">A
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">B
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">C
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">D
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">E
                                </div>                                                                                                          
                            </div>
                        </div>
                    </div>
                </div>
            </div>

A.
B
C
D
E
更新：下面有一个更好的答案


JS（Fiddle：）：

更新（小提琴：）：

$（'.collapse'）.collapse（）；
$（'.面板标题h4 a输入[type=checkbox]'）。在（'单击'）上，函数（e）{
e、 停止传播（）；
$（this）.parent（）.trigger（'click'）；//我也面临同样的问题，我在这段视频中找到了答案：
我希望有帮助！
我现在用它在复选框下面折叠一个完整的div，非常简单。
唯一的问题是，如果你快速双击它，它会变得混乱，但通常不会发生。
我的解决方案是，在复选框中添加标签包装，而不是超链接：

<div class="checkbox">
    <label data-toggle="collapse" data-target="#collapseOne">
        <input type="checkbox"/> I have Driver License  
    </label>
</div>


我有驾驶执照

看看它。
我做到了，效果很好

<script> 
        $(function () {

            if($('#id_checkbox').prop('checked'))
            {
                $('#id_collapse').collapse();
            }
        });

</script>


$（函数（）{
if（$（'id_复选框'）.prop（'checked'））
{
$（'id#u collapse'）.collapse（）；
}
});
您甚至不需要初始化
。折叠
。只需将标题更改为：



我有驾驶执照
我开发了一个奇特的复选框切换，用于折叠手风琴内容

<h4 class="panel-title">
    <label data-toggle="collapse" data-target="#collapseOne" class="control-toggle">
        <input type="checkbox" />
        <div class="toggle-button"></div>
    </label>
    I have Driver License   
</h4>


我有驾驶执照

希望你们喜欢：-）

小提琴链接：
我有驾驶执照
你想要什么
我知道这是一个老问题，但我在Firefox和重新加载页面时遇到了一些问题，这会使复选框处于选中状态，内容处于隐藏状态，这不是一个好的用户体验

在我看来，最简单的方法是根据复选框的状态添加/删除隐藏/显示内容的类

下面是我的示例代码


$（文档）.ready（函数（）
{
$（'input[type=checkbox][data toggle^=toggle]'）。在（'change'上，
职能（e）{
让复选框=$（此）；
让target=$（checkbox.data（'target'））；
如果（复选框为（“：选中”））{
target.addClass（“show”）；
target.addClass（“in”）；
}否则{
target.removeClass（“show”）；
target.removeClass（“in”）；
}
}
);
/*确保状态正确-尤其是按F5后*/
$（'input[type=checkbox][data toggle^=toggle]'）。每个(
函数（索引，元素）{
让复选框=$（此）；
让target=$（checkbox.data（'target'））；
如果（复选框为（“：选中”））{
target.addClass（“show”）；
target.addClass（“in”）；
}否则{
target.removeClass（“show”）；
target.removeClass（“in”）；
}
}
)
});

如您所见，只需将
data toggle=toggle
和
data target
元素添加到您的输入中，如下所示：

我有驾驶执照

可以在此处找到一个示例：

该代码适用于引导程序3（
.in
）和引导程序4（
.show
）。请根据您的需要使用它

PS：该代码与
结合使用时也有效。是否需要进一步阐述？是的，它会检查。但它不会崩溃。正如我告诉它的那样，必须通过选中复选框来激活。@YenneInfo你能看看我的问题吗，它几乎与这个问题相同？@bambiinela请分享你问题的链接。对不起，我放错了链接。这是我的任务ion：如果您快速双击复选框，该区域将显示，但复选框将被取消选中。依我看，这是这里的最佳答案。它可以减少代码编写量，折叠正确的元素，并生成一个行为正确的复选框，该复选框不采用类似链接的行为和样式。这似乎是这里唯一一个真正解决OP问题的答案。很高兴我也找到了它，因为它也解决了我的问题。不，如果您快速双击复选框，该区域将显示，但复选框将显示unchecked@BlackICE别这样ck那么快。这是一个很好的答案！@spartedtechie.com告诉我的用户和QA，不鼓励使用链接进行回答，但没有实际解决方案的详细信息。如果链接中断，您的答案将过时。更不用说观看此视频至少需要Lynda.com的试用会员资格。欢迎使用StackOverflow。尝试解释更多信息这似乎是最符合逻辑的答案，至少在Firefox 61.0.1上是如此（关于上面的包装标签解决方案，我不能说这一点）-不过，我的猜测是，指定数据切换和数据目标并不总是适用于输入type=“checkbox”
<script> 
        $(function () {

            if($('#id_checkbox').prop('checked'))
            {
                $('#id_collapse').collapse();
            }
        });

</script>

<h4 class="panel-title">
    <label data-toggle="collapse" data-target="#collapseOne" class="control-toggle">
        <input type="checkbox" />
        <div class="toggle-button"></div>
    </label>
    I have Driver License   
</h4>

<input type="checkbox" data-toggle="collapse" data-target="#demo" uncheck/>I have Driver License
<div id="demo" class="collapse">
<label>What you want collapse</label>
</div>