如何在複選框中放置一個複選框？

Question

我正在使用Bootstrap並希望在複選框內放置一個按鈕，與使用Gmail完成所有消息的操作類似。我查看了Gmail的CSS，但一直無法確定他們是如何做到的。

Answer 1

下面是一個簡單的例子，做了一些CSS和一點點的jQuery檢查複選框的DIV的按鈕被點擊時：

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/