Erjon Erjon - 12 days ago 5
CSS Question

Select only one image checkbox

i have done a 3 image checkbox in css, I want to select only one image like a radio button, so you can't select more than one. I am not quiet sure how can i achive that, so a little help would be pleased.Thanks in advance

Here is the css file and my form







label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
position: absolute;
z-index: 100;
}
:checked+label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
display: none;
}
/*pure cosmetics:*/
image {
width: 100px;
height: 100px;
}
label {
margin: 10px;
}

<section>
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<span class="title-small text-uppercase letter-spacing-3 font-weight-600" style=" color: #da7e57;">Antipasto</span>
<div class="separator-line-thick bg-black no-margin-bottom margin-one xs-margin-top-five"></div>
</div>
<!-- end section title -->
</div>
<section class="wow fadeIn blog-details-text" style="padding-top: 30px;padding-bottom: 30px">
<div class="container">

<div class="col-md-4 col-sm-6 checkboox">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" class="checkbox">
<img src="{{URL::asset('external_assets/assets/images/sangiovese.jpg') }}">
</label>
</div>

<div class="col-md-4 col-sm-6 checkboox">
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2" class="checkbox">
<img src="{{URL::asset('external_assets/assets/images/vintageTORTELLINIragu.jpg') }}">
</label>
</div>

<div class="col-md-4 col-sm-6 checkboox">
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3" class="checkbox">
<img src="{{URL::asset('external_assets/assets/images/bolied_meat.jpg') }}">
</label>
</div>

</div>
</section>


</div>
</section>




Answer

Try to put this in your js file

$('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"]').not(this).prop('checked', false);
});