html - 使单选按钮的图像可点击

Question

我正在尝试用一些图像替换传统的单选按钮。所以当有人点击选项时，图像应该出现在复选框上。我的问题是，当我点击复选框时，该选项没有被选中。但是因为我已经为标签提供了一个 for 属性，当我点击标签时选项被选中。

已更新

这是我的部分工作 jsFiddle

Answer 1

我在回答我自己的问题

这里是 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>