如何在按钮内放置复选框？

Question

我正在使用Bootstrap，并希望在按钮内放置一个复选框，类似于使用Gmail选择所有邮件。我查看了Gmail CSS，但无法确定他们是如何完成的。

Answer 1

这是一个简单的例子，由DIV组成，带有一些CSS和一个小jQuery来检查单击按钮时的复选框：

jsFiddle demo

<强> HTML：

<div id="container">
    <div id="btnOuterDIV">
        <div id="btnChkbox">
            <input type="checkbox" id="btnCB" />
        </div>
    </div>
</div>

<强> CSS：

#container  {padding:50px;}
#btnOuterDIV{height:30px;width:80px;border:1px solid #ccc;border-radius:5px;}
#btnOuterDIV:hover{border-color:#888;cursor:pointer;}
#btnChkbox{height:15px;width:15px;padding-top:5px;padding-left:5px;}

<强> jQuery的：

$('#btnOuterDIV').click(function(){
    alert('You clicked the button');
    $('#btnCB').prop('checked',true);
});

---

修改

添加到按钮的按钮文字（标签）：http://jsfiddle.net/crrojLho/2/