在 Bootstrap 3 中将 HTML 标签转换为按钮以切换复选框答案

【问题标题】：Convert HTML label to button in Bootstrap 3 to toggle a checkbox在 Bootstrap 3 中将 HTML 标签转换为按钮以切换复选框
【发布时间】：2018-01-28 10:04:51
【问题描述】：

我正在使用以下 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>

【问题讨论】：

标签： html twitter-bootstrap button label

【解决方案1】：

你可以在按钮中使用标签

    <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>

【讨论】：

确定？？请参阅jsfiddle 为我工作
是的 - 找到了问题。在 FIREFOX 中它不会在 Chrome 中切换它...知道如何使其跨浏览器兼容
糟糕！不，我没有，但你可以给一个类 "btn btn-success" 或任何 btn 类 bootstrap ，这不需要按钮，请参阅：jsfiddle

【解决方案2】：

你可以使用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>

【讨论】：