Question

我使用以下Html标签设置切换一个复选框，打开一个菜单面板

<label for="special-menu" class="sp-menu">
    <i class="fa fa-bars"></i> Open Special Menu
</label>

<input id="special-menu" class="sl-toggle" type="checkbox">
    <div class="Menu-container">
        ...
    </div">

有没有办法（没有js）将其转换为按钮？像

这样的东西

<button for="special-menu" class="btn btn-default">
    <i class="fa fa-bars"></i> Open Special Menu
</button>

Answer 1

您可以使用jQuery和javascript：

$("#btn").click(function(){

var checkbox = $('#special-menu').prop('checked');

if(checkbox == true){
$('#special-menu').prop('checked', false);
}	
else{
$('#special-menu').prop('checked', true);
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<button id="btn" for="special-menu" class="btn btn-default">
    <i class="fa fa-bars"></i> Open Special Menu
</button>

<input id="special-menu" class="sl-toggle" type="checkbox">
    <div class="Menu-container">
        ...
    </div>

Answer 2

您可以在按钮

中使用标签

＆＃13;

    <button  for="special-menu" class="btn btn-default">
        <label for="special-menu"><i class="fa fa-bars"></i> Open Special Menu
    </label></button>
    
    <input id="special-menu" class="sl-toggle" type="checkbox">
        <div class="Menu-container">
            ...
        </div>

＆＃13;

将Html标签转换为Bootstrap 3中的按钮以切换复选框

2 个答案: