BillNathan
Reputation: 609
How do I make the checkbox works as multi select option?
I have created a select option using checkbox. The select option works on click. So when I click on text "saloon" it gets clicked. How do I bring the onclick effect on the whole box instead of text only, and also, how do I bring hover effect on the box border?
I shall be looking for some help from the StackOverflow community.
Regards, Bill
$(".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>Upvotes: 0
Views: 273
Answers (1)
nvioli
Reputation: 4219
It isn't working because the whole item is wrapped in a label; therefore a click anywhere in the box is toggling the checkbox, and then it's toggling again in javascript. The label solution works fine, except for your additional css markup, so a simple solution is to only use javascript to toggle the class when the checkbox's value is changed, and let the markup semantics handle whether or not the checkbox is clicked.
Edit: updated per your comment on desiring to change the background color. The only change was to target the .btn (label) element instead of the .vehicle-item to toggle the class, and move the margin outside that element.
$('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>Edit: this second solution is more difficult given your comment that you're trying to change the background color.
Note that you could also remove javascript completely using the css :checked pseudo-selector and the general sibling selector:
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>Upvotes: 2
Related Questions
- Awesome Bootstrap Checkboxes for Bootstrap Multiselect
- Bootstrap - Select all checkbox with javascript
- Dropdown Multiselect Check Mark Toggle
- Bootstrap drop down with check box(s) allowing for multiple check boxes instead of just one
- How to add options to bootstrap multiselect checkbox drop down via fancybox
- multiselect checkbox dropdown
- bootstrap multiselect checkboxes should be visible on the page
- bootstrap multiselect checkbox behave like radio button
- Enable Multi Select option in bootstrap check box?
- Create multiple Checkboxes with JavaScript