按钮内的切换/复选框

Toggle/Checkbox within a button

本文关键字：复选框 按钮      更新时间：2023-09-26

我有一个来自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');
});

}); 

<!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>
相关文章：