checkbox value within submit button

So this is tough to describe but I cannot figure it out, I feel like i am close however!

Basically I have a list of things, that need to be organised.

lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.

I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.

Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???

so far I have gotten this close:

<div class="wells">
    <input type="image" value="comedy" src="img/pieces/comedy.png"
           alt="comedy" onclick="myFunction()" checked>
</div>

I know myFunction works and does what it is told. I literally need the value of the checkbox to be used as a submit button.

the long way is like this:

<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">

then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().

I know myFunction works and does what it is told. I literally need the value of the checkbox to be used as a submit button.