How to integrate checkboxes with jquery to a custom html?

I've a situation where i should integrate the check boxes with custom html and also in turn i need all the functions of normal check开发者_开发问答box.

Can you guide me how to do that? I'm new to jquery..

---

I'd ignore the html checkbox altogether for this design. I'd build a graphics element (the blue overlay) which becomes visible when you click the image, and invisible if clicked again. For input, in every div like this, you should put an <input type="hidden" value="0">, and with jQuery set the relevant input's value to 1 when the overlay is on, and to 0 again when it's off.

Let me know on which part exactly you're having a problem, I'll try to elaborate. Hope it helps.

Here's a jsFiddle

---

have following structure and when <a> is clicked changed the checkbox value using JavaScript. add the image and text to the span.

<span>
  <a href="#"></a>
  <input type="checkbox" name="chbox">
</span>