Question

我有一个来自bootstraptoggle.com的切换，我把它放在一个按钮内。它适用于Chrome，但不适用于Firefox。如何点击按钮强制切换或复选框进行检查，并在按下按钮时进行检查。我需要一个jquery函数，在每次单击之后检查和取消选中。

JSP：

    <button id="topology_button" type="button"
                            class="btn btn-default">Portfolio
                                <input type="checkbox" class="expander" id="toggle"
                                    data-on="Portfolio" data-off="Topology" checked
                                    data-toggle="toggle" data-onstyle="success">
                            Topology
                        </button>

这是Jquery，我会添加它。所以每次奇怪的点击都会取消选中框/切换。

$(document).ready(function() {
$('#toggle').change(function() {
    if (this.checked)
        $('#project-list-area').fadeIn('slow'),
        $('#topology').fadeOut('slow');
    else
        $('#topology').fadeIn('slow'),
        $('#project-list-area').fadeOut('slow');
});

}）;

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#toggle').change(function() {

    if (this.checked)
{

        $('#project-list-area').fadeIn('slow');
        $('#topology').fadeOut('slow');
}
    else
{

        $('#topology').fadeIn('slow');
        $('#project-list-area').fadeOut('slow');
}
});
});
</script>
</head>
<body>
 <button id="topology_button" type="button"
                            class="btn btn-default">Portfolio
                                <input type="checkbox" class="expander" id="toggle"
                                    data-on="Portfolio" data-off="Topology" checked
                                    data-toggle="toggle" data-onstyle="success">
                            Topology
                        </button>

<div id='project-list-area'>
project-list-area
</div>
</body>
</html>

按钮内的切换/复选框

1 个答案: