hide chekbox, highlight selected pitures - php

Question

I would like to hide the chekboxes in my from and replace them with pictures. At the moment i already have the pictures but i would also like to hide the check3boxes themself. if one of the pictures gets selected, it should get a highlighted border. I would be really glad for any help
here's my current form code
<form type="post" action="photoselection.php">
<div id="photowrapper">
<div class="photo">
<input type="checkbox" value="" name="bild1">
<label class="label_item" for="rbild1"><img src="bild1.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild2" id="rbild2">
<label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild3" id="rbild3">
<label class="label_item" for="rbild3"><img src="bild3.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild4" id="rbild4">
<label class="label_item" for="rbild4"><img src="bild4.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild5" id="rbild5">
<label class="label_item" for="rbild5"><img src="bild5.jpg"/></label>
</div>
<div class="photo">
<input type="checkbox" value="" name="bild6" id="rbild2">
<label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
<Input type = "Submit" Name = "Submit" VALUE = "Bild anzeigen">
</div>
</div>
</form>

Answer 1

You can do it using CSS
<style>
.photo > input{
display:none;
}
.photo > input:checked + label > img{
border: 3px solid black;
}
</style>
Hope it should work

Answer 2

As I said in my comment (and as #roullie mentioned), one way to do it is with jQuery / JS, a simple way to hide the checkboxes would be to do it like this:
jQuery example:
$(document).ready(function() {
$( ".checkbox" ).click(function() {
$( this ).hide();
});
});
And then apply the checkbox class to any of the checkboxes you want to hide when a image is shown.
This can also be used to show the checkbox again or add some other logic to be executed when the image is shown.

Answer 3

Use your image as background-image and with the help of a wrapper you can hide the checkbox completly. Works also with radio buttons (with a slight addition)
//HTML
<div class="checkbox">
<input id="check" value="" name="check" checked="checked" type="checkbox">
<label for="check"></label>
</div>
//CSS:
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox input[type="checkbox"] + label {
display: block;
float: left;
border: 1px solid grey;
width: 100px;
height: 50px;
background: transparent url("https://placehold.it/100x50/4DA61F") no-repeat scroll 0 0;
}
.checkbox input[type="checkbox"]:checked + label {
border: 1px solid darkred;
background: transparent url("https://placehold.it/100x50/F3C914") no-repeat scroll 0 0;
}
JSFiddle Example 1
Here a second solution with a inline image:
//HTML
<div class="checkbox">
<input id="check" value="" name="check" type="checkbox"/>
<label for="check">
<img src="https://placehold.it/100x50/deff00" alt=""/>
</label>
</div>
//CSS
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox input[type="checkbox"] + label {
display: block;
float: left;
font-size: 0;
border: 2px solid #f4f4f4;
}
.checkbox input[type="checkbox"]:checked + label {
border: 2px solid red;
}
JSFiddle Example 2