如何使复选框作为多选选项？

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>