如何使復選框用作多選選項？

Question

我已經使用復選框創建了一個選擇選項。 選擇選項在單擊時起作用。 因此，當我單擊文本“ saloon”時，它就會被單擊。 如何在整個框上而不是僅在文本上帶來onclick效果，並且如何在框邊框上帶來懸停效果？

我將在StackOverflow社區尋求幫助。

問候，比爾

  $(".vehicle-item").click(function(){ var checkBoxes = $(this).siblings('input[type=checkbox]'); checkBoxes.prop('checked', $(this).is(':checked') ? true : false); $(this).toggleClass("check-multiselect-vehicles"); }); 

  .items-collection .items { float: left; margin: 0px; padding: 0px; } .items-collection .vehicle-item input[type=checkbox] { display: none; } .items-collection label{ padding: 6px 0px 0px 0px; float: left; margin:5px; border-radius: 3px; color: #6f7c87; border: 2px solid #b4bbc6; width: 65px; transition: all 225ms; display: block; } .vehicle-item-title{ font-size:11px; } .vehicle-item:hover { color: #262959; } .check-multiselect-vehicles { color: red; } .saloon-icon, .suv-icon, .mini-icon { display: block; fill: #6F7C87; width: 60px; height: 28px; zoom: 1px; } .saloon-icon:hover, .suv-icon:hover, .mini-icon:hover { fill: #262959; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items-collection"> <div class="col-md-4 items car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 23" width="82%" height="100%" fill="#707D86"> <g> <circle cx="37.5" cy="15.8" r="2.6"/> <circle cx="7.9" cy="15.9" r="2.7"/> <path d="M41.7,16.5c0,0,4.6,1.4,5.7-1.1c0,0,1.1-3.4-0.5-4.2l-0.1-1L45.6,10c0,0,0.9-1.9,0.2-2l-4.1-0.7L33.7,4c0,0-8.1-1.3-11.2,0c0,0-5.5,1.9-8.2,4.1c0,0-9.6,0.4-10.6,1.8c0,0-3.3,3.1-2.5,5c0,0,0.4,1.6,2,2.1H4c0,0-0.2-4.7,4.4-4.3c0,0,0,0,0.1,0c0.4,0,3.7,0.2,3.7,4.8h21.1c0,0,0.3-4.9,3.8-4.9C37.1,12.4,41.2,11.6,41.7,16.5z"/> <path d="M37.5,8.1h-9.7V4.5c0,0,6,0.1,6.7,0.6C34.6,5.1,36.8,6.3,37.5,8.1z" fill="#FFFDFD"/> <path d="M25.8,4.4v3.6h-7.5C18.3,8.1,21.4,3.9,25.8,4.4z" fill="#FFFDFD"/> </g> <path d="M4.2,10.1l0.6,0.9l-2,2.3l-1.5,0.5C1.3,13.7,2.5,10.2,4.2,10.1z" fill="#FFFDFD"/> </svg> <h5 class="vehicle-item-title">Saloon</h5> </div> </label> </div> </div> <!-- SUVs --> <div class="items col-md-4 car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 23" width="87%" height="100%" fill="#707D86"> <g> <path d="M37.8,20.6H15.7l-1-0.8c0,0,0-4.5-3.5-4.4c0,0-4-0.6-4.1,4.2c0,0,0.2,1.2-1.4,1c0,0-1.8-0.3-2.5-1.6L2,17.4c0,0-0.6-2,0.6-2.5c0,0-1.5-2.1,2.5-3.3c0,0,3.7-1.6,5.8-1.3l11-5.8c0,0,15.3-2.2,23.7,0c0,0,3.7,1.9,4.6,7.6c0,0,0.4,5.8,0,7c0,0-0.7,1.5-1,1.6c0,0-1.1,0.7-2.2,0c0,0-0.5-5.4-4.8-5.1C42.3,15.5,38.1,14.9,37.8,20.6z"/> <path d="M41.8,7.2v4.5h4C45.8,11.7,45.4,8.3,41.8,7.2z" fill="#FFFFFF"/> <path d="M31.1,6.4L29.9,11l9.2,0.2c0,0,1.3-4.3-1.4-4.8H31.1z" fill="#FFFFFF"/> <path d="M27.8,6.4l-0.5,4.8l-8.5,0.1c0,0-1.1-1.7,0.6-2.9l4-1.8L27.8,6.4z" fill="#FFFFFF"/> <circle cx="41.8" cy="20" r="3" fill="#707D86"/> <circle cx="10.7" cy="19.4" r="3" fill="#707D86"/> <path d="M5,12.2c0,0-3.7,0.9-2.5,3.3s3.2-0.7,3.2-0.7"/ fill="#FFFFFF"> </g> </svg> <h5 class="vehicle-item-title">SUVs</h5> </div> </label> </div> </div> </div> 

Answer 1

它無效，因為整個項目都用label包裹了; 因此，在框中的任意位置單擊都會切換復選框，然后再次在javascript中切換。 label解決方案可以很好地工作，除了您的其他CSS標記之外，因此一個簡單的解決方案是僅在更改復選框的值時使用javascript切換類，並讓標記語義處理是否單擊復選框。

編輯：根據您對更改背景顏色的評論進行更新。 唯一的更改是將.btn （ label ）元素而不是.vehicle-item定位為目標，以切換類，並將margin移到該元素之外。

 $('input[type=checkbox]').change(function() { $(this).closest('.btn').toggleClass("check-multiselect-vehicles"); }) 

 .items-collection .items { float: left; padding: 0px; margin:5px; } .items-collection .vehicle-item input[type=checkbox] { display: none; } .items-collection label{ padding: 6px 0px 0px 0px; float: left; border-radius: 3px; color: #6f7c87; border: 2px solid #b4bbc6; width: 65px; transition: all 225ms; display: block; } .vehicle-item-title{ font-size:11px; } .vehicle-item:hover { color: #262959; } .check-multiselect-vehicles { background: red; } .saloon-icon, .suv-icon, .mini-icon { display: block; fill: #6F7C87; width: 60px; height: 28px; zoom: 1px; } .saloon-icon:hover, .suv-icon:hover, .mini-icon:hover { fill: #262959; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items-collection"> <div class="col-md-4 items car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 23" width="82%" height="100%" fill="#707D86"> <g> <circle cx="37.5" cy="15.8" r="2.6"/> <circle cx="7.9" cy="15.9" r="2.7"/> <path d="M41.7,16.5c0,0,4.6,1.4,5.7-1.1c0,0,1.1-3.4-0.5-4.2l-0.1-1L45.6,10c0,0,0.9-1.9,0.2-2l-4.1-0.7L33.7,4c0,0-8.1-1.3-11.2,0c0,0-5.5,1.9-8.2,4.1c0,0-9.6,0.4-10.6,1.8c0,0-3.3,3.1-2.5,5c0,0,0.4,1.6,2,2.1H4c0,0-0.2-4.7,4.4-4.3c0,0,0,0,0.1,0c0.4,0,3.7,0.2,3.7,4.8h21.1c0,0,0.3-4.9,3.8-4.9C37.1,12.4,41.2,11.6,41.7,16.5z"/> <path d="M37.5,8.1h-9.7V4.5c0,0,6,0.1,6.7,0.6C34.6,5.1,36.8,6.3,37.5,8.1z" fill="#FFFDFD"/> <path d="M25.8,4.4v3.6h-7.5C18.3,8.1,21.4,3.9,25.8,4.4z" fill="#FFFDFD"/> </g> <path d="M4.2,10.1l0.6,0.9l-2,2.3l-1.5,0.5C1.3,13.7,2.5,10.2,4.2,10.1z" fill="#FFFDFD"/> </svg> <h5 class="vehicle-item-title">Saloon</h5> </div> </label> </div> </div> <!-- SUVs --> <div class="items col-md-4 car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 23" width="87%" height="100%" fill="#707D86"> <g> <path d="M37.8,20.6H15.7l-1-0.8c0,0,0-4.5-3.5-4.4c0,0-4-0.6-4.1,4.2c0,0,0.2,1.2-1.4,1c0,0-1.8-0.3-2.5-1.6L2,17.4c0,0-0.6-2,0.6-2.5c0,0-1.5-2.1,2.5-3.3c0,0,3.7-1.6,5.8-1.3l11-5.8c0,0,15.3-2.2,23.7,0c0,0,3.7,1.9,4.6,7.6c0,0,0.4,5.8,0,7c0,0-0.7,1.5-1,1.6c0,0-1.1,0.7-2.2,0c0,0-0.5-5.4-4.8-5.1C42.3,15.5,38.1,14.9,37.8,20.6z"/> <path d="M41.8,7.2v4.5h4C45.8,11.7,45.4,8.3,41.8,7.2z" fill="#FFFFFF"/> <path d="M31.1,6.4L29.9,11l9.2,0.2c0,0,1.3-4.3-1.4-4.8H31.1z" fill="#FFFFFF"/> <path d="M27.8,6.4l-0.5,4.8l-8.5,0.1c0,0-1.1-1.7,0.6-2.9l4-1.8L27.8,6.4z" fill="#FFFFFF"/> <circle cx="41.8" cy="20" r="3" fill="#707D86"/> <circle cx="10.7" cy="19.4" r="3" fill="#707D86"/> <path d="M5,12.2c0,0-3.7,0.9-2.5,3.3s3.2-0.7,3.2-0.7"/ fill="#FFFFFF"> </g> </svg> <h5 class="vehicle-item-title">SUVs</h5> </div> </label> </div> </div> </div> 

編輯：鑒於您要更改背景色的評論，第二種解決方案更加困難。 請注意，您還可以使用css :checked偽選擇器和常規的同級選擇器完全刪除javascript：

input[type=checkbox]:checked ~ .vehicle-item-title {
  color: red;
}

 .items-collection .items { float: left; margin: 0px; padding: 0px; } .items-collection .vehicle-item input[type=checkbox] { display: none; } .items-collection label{ padding: 6px 0px 0px 0px; float: left; margin:5px; border-radius: 3px; color: #6f7c87; border: 2px solid #b4bbc6; width: 65px; transition: all 225ms; display: block; } .vehicle-item-title{ font-size:11px; } .vehicle-item:hover { color: #262959; } input[type=checkbox]:checked ~ .vehicle-item-title { color: red; } .saloon-icon, .suv-icon, .mini-icon { display: block; fill: #6F7C87; width: 60px; height: 28px; zoom: 1px; } .saloon-icon:hover, .suv-icon:hover, .mini-icon:hover { fill: #262959; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items-collection"> <div class="col-md-4 items car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 23" width="82%" height="100%" fill="#707D86"> <g> <circle cx="37.5" cy="15.8" r="2.6"/> <circle cx="7.9" cy="15.9" r="2.7"/> <path d="M41.7,16.5c0,0,4.6,1.4,5.7-1.1c0,0,1.1-3.4-0.5-4.2l-0.1-1L45.6,10c0,0,0.9-1.9,0.2-2l-4.1-0.7L33.7,4c0,0-8.1-1.3-11.2,0c0,0-5.5,1.9-8.2,4.1c0,0-9.6,0.4-10.6,1.8c0,0-3.3,3.1-2.5,5c0,0,0.4,1.6,2,2.1H4c0,0-0.2-4.7,4.4-4.3c0,0,0,0,0.1,0c0.4,0,3.7,0.2,3.7,4.8h21.1c0,0,0.3-4.9,3.8-4.9C37.1,12.4,41.2,11.6,41.7,16.5z"/> <path d="M37.5,8.1h-9.7V4.5c0,0,6,0.1,6.7,0.6C34.6,5.1,36.8,6.3,37.5,8.1z" fill="#FFFDFD"/> <path d="M25.8,4.4v3.6h-7.5C18.3,8.1,21.4,3.9,25.8,4.4z" fill="#FFFDFD"/> </g> <path d="M4.2,10.1l0.6,0.9l-2,2.3l-1.5,0.5C1.3,13.7,2.5,10.2,4.2,10.1z" fill="#FFFDFD"/> </svg> <h5 class="vehicle-item-title">Saloon</h5> </div> </label> </div> </div> <!-- SUVs --> <div class="items col-md-4 car-col-responsive"> <div data-toggle="buttons" class="btn-group"> <label class="btn"> <div class="vehicle-item"> <input type="checkbox" name="multi[]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 23" width="87%" height="100%" fill="#707D86"> <g> <path d="M37.8,20.6H15.7l-1-0.8c0,0,0-4.5-3.5-4.4c0,0-4-0.6-4.1,4.2c0,0,0.2,1.2-1.4,1c0,0-1.8-0.3-2.5-1.6L2,17.4c0,0-0.6-2,0.6-2.5c0,0-1.5-2.1,2.5-3.3c0,0,3.7-1.6,5.8-1.3l11-5.8c0,0,15.3-2.2,23.7,0c0,0,3.7,1.9,4.6,7.6c0,0,0.4,5.8,0,7c0,0-0.7,1.5-1,1.6c0,0-1.1,0.7-2.2,0c0,0-0.5-5.4-4.8-5.1C42.3,15.5,38.1,14.9,37.8,20.6z"/> <path d="M41.8,7.2v4.5h4C45.8,11.7,45.4,8.3,41.8,7.2z" fill="#FFFFFF"/> <path d="M31.1,6.4L29.9,11l9.2,0.2c0,0,1.3-4.3-1.4-4.8H31.1z" fill="#FFFFFF"/> <path d="M27.8,6.4l-0.5,4.8l-8.5,0.1c0,0-1.1-1.7,0.6-2.9l4-1.8L27.8,6.4z" fill="#FFFFFF"/> <circle cx="41.8" cy="20" r="3" fill="#707D86"/> <circle cx="10.7" cy="19.4" r="3" fill="#707D86"/> <path d="M5,12.2c0,0-3.7,0.9-2.5,3.3s3.2-0.7,3.2-0.7"/ fill="#FFFFFF"> </g> </svg> <h5 class="vehicle-item-title">SUVs</h5> </div> </label> </div> </div> </div>