Make image clickable for radio button

Question

I am trying to replace the traditional radio button with some image. So when someone clicks on the option, the image should appear on the checkbox. My problem is, the option is not getting selected when I click on the check box. But since I have given an for attribute for the label, option is getting selected when I click on the label.

updated

here is my partially working jsFiddle

Answer 1

I am answering my own question

here is the jsfiddle

<ul class="pt-answers" style=" margin-bottom: 10px; margin-left:20px;">
        <li style="list-style: none;">
             <label for="q_2_1">
        <input type="radio" id="q_2_1" name="q_2" value="1">
            <img />
        Answer number one </label>

    </li>
        <li style="list-style: none;">
                <label for="q_2_2">
        <input type="radio" id="q_2_2" name="q_2" value="2">
            <img />
     Answer number two</label>

    </li>
        <li style="list-style: none;">
            <label for="q_2_3">
        <input type="radio" id="q_2_3" name="q_2" value="3">
        <img />
        Answer number three</label>

    </li>
        <li style="list-style: none;">
            <label for="q_2_4">
        <input type="radio" id="q_2_4" name="q_2" value="4">
              <img for="q_2_4"/>Answer number four
        </label>
    </li>
    </ul>

Answer 2

I hope it will help you DEMO

<input type="checkbox">

<br><br>

<span style="position:relative">
  <input type="radio" >
<span>

CSS

/* checkbox */

input[type='checkbox'] {
  height: 25px;
  width: 25px;
  margin-top: 0;
  margin-right: -25px;
  margin-bottom: -25px;
  margin-left: 0;
}
input[type='checkbox']:before { 
  width: 25px;
  height: 25px;
  background: white;
  border: 2px solid #333434;
  content: '';
  position: absolute;
}
input[type='checkbox']:after { 
  position: absolute;
  content: '';
  width: 17px;
  height: 6px;
  top: 15px;
  left: 12px;
  opacity: 0;
  background: transparent;
  border: 1px solid black;
  border-width: 3px;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  -webkit-transform: rotate(-50deg);
}
input[type='checkbox']:checked:after {           opacity: 1;
}

/*radio button*/
input[type='radio'] {
  height: 25px;
  width: 25px;
  margin-top: 0;
  margin-right: -25px;
  margin-bottom: -25px;
  margin-left: 0;
}


input[type='radio']:before { 
  width: 25px;
  height: 25px;
  background: white;
  border: 1px solid #333434;
  border-radius: 100%;
  content: '';
  position: absolute;
}
input[type='radio']:after { 
  opacity: 0;
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background: black;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 100%;
  box-shadow: 0 1px rgba(255,255,255,0.1);
  -webkit-transform: none;
  top: -2px;
  left: 7px;
}
input[type='radio']:checked:after {               opacity: 1;
}