複選框值列表的選擇和刪除

Question

我有一個複選框值列表。我的目標是允許用戶點擊每個值的整個彩色框（即，複選框將在單擊複選框，名稱和整個彩色框時標記）。我有點成就，但不知何故複選框框懸停在中間顯示。

這裏我BOOTPLY - BOOTPLY

$("#clear").change(function() { 
 
    $("input:checkbox").prop('checked', $(this).prop("checked")); 
 
});

<div class="btn-toolbar"> 
 
     <!--Default buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-default" type="button">Brand</button> 
 
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
 
       <input class="typeahead" placeholder="Search values" type="text"> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Alpha</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Beta 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Gamma</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Delta</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Omega</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Koppa 
 
        </label> 
 
       </div> 
 
\t \t \t \t <div class="div_form"> 
 
\t \t \t \t \t \t \t <span class="btn_apply" id="apply">Apply</span> 
 
        <span class="btn_clear"><input id="clear" type="checkbox">Clear</span> 
 
\t \t \t \t \t </div> 
 
      </div> 
 
     </div><!--Primary buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Colour</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
 
\t \t \t \t <input class="typeahead" placeholder="Search values" type="text"> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Eins</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Zwei 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Drei</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Vier</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fünf</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Sechs 
 
        </label> 
 
       </div> 
 
\t \t \t \t <div class="div_form"> 
 
\t \t \t \t \t \t \t <span class="btn_apply" id="apply">Apply</span> 
 
\t \t \t \t \t \t \t <span class="btn_clear"><input id="clear" type="checkbox">Clear</span> 
 
\t \t \t \t \t </div> 
 
      </div> 
 
     </div><!--Info buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-info" type="button">Merchant</button> 
 
      <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
 
\t \t \t \t <input class="typeahead" placeholder="Search values" type="text"> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> First value</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Second option 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Third choice</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fourth alternative</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fifth decision</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Sixt focus 
 
        </label> 
 
       </div> 
 
\t \t \t \t <div class="div_form"> 
 
\t \t \t \t \t \t \t <span class="btn_apply" id="apply">Apply</span> 
 
\t \t \t \t \t \t \t <span class="btn_clear"><input id="clear" type="checkbox">Clear</span> 
 
\t \t \t \t \t </div> 
 
      </div> 
 
     </div><!--Success buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-danger" type="button">Price</button> 
 
      <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
 
\t \t \t \t <input class="typeahead" placeholder="Search values" type="text"> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-1</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-2 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-3</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-4</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-5</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Value-6 
 
        </label> 
 
       </div> 
 
\t \t \t \t <div class="div_form"> 
 
\t \t \t \t \t \t \t <span class="btn_apply" id="apply">Apply</span> 
 
\t \t \t \t \t \t \t <span class="btn_clear"><input id="clear" type="checkbox">Clear</span> 
 
\t \t \t \t \t </div> 
 
      </div> 
 
     </div> 
 
     </div><!--Success buttons with dropdown menu-->

Answer 1

這樣做對正確的懸停：

1. 取出with: 100%從.checkbox :hover：

   .checkbox :hover { 
       background-color: red; 
       cursor: pointer; 
       /* width: 100%; */ 
   } 
   

注意

也請記住你應該張貼不同的問題，當你真正ahve在SOF不同的問題。因此，這個問題及其答案會對社區更有用。

在這裏不是一個地方，人們爲你做的事情。你應該表現出一些努力，並讓人們幫助你解決它YOU。

更新1

，並把它添加到label：

.checkbox label, .radio label { 
    min-height: 20px; 
    padding-left: 20px; 
    margin-bottom: 0; 
    font-weight: 400; 
    cursor: pointer; 
    width: 100%; 
}