单击时无法获取单选按钮图像

Question

我正在开发一个Joomla页面，其中有4行单选按钮（标记为A B C和D）显示在页面下方，作为多项选择测试的一部分。每组单选按钮都在一个表格中。单选按钮已被图像取代。这是显示一行单选按钮的一部分的HTML：

input[type='radio'] {
  display: none;
}
input[type="radio"] > img:nth-child(2) {
  display: none;
}
input[type="radio"]:checked + img:nth-child(2)img:nth-child(1) {
  display: none;
}
input[type="radio"]:checked + img:nth-child(2)img:nth-child(1) {
  display: inline-block;
}

<table>
  <tbody>
    <tr>
      <form>
        <td>
          <label>
            <input type="radio" name="toeic" class="toeic_p1" value="A" required="required">
            <img class="radio_btn" src="/templates/beez_20/images/toeic/unchek_A.png" height="25" width="25">
            <img class="radio_btn" src="/templates/beez_20/images/toeic/chek_A.png" height="25" width="25">
          </label>
        </td>
        ....
        <td>
          <label>
            <input type="radio" name="toeic" class="toeic_p1" value="D">
            <img class="radio_btn" src="/templates/beez_20/images/toeic/unchek_D.png" height="25" width="25">
            <img class="radio_btn" src="/templates/beez_20/images/toeic/chek_D.png" height="25" width="25">
          </label>
        </td>
      </form>
    </tr>
  </tbody>
</table>

作为一个例子，我跟着这里列出的代码Change image on radio button click using JS or HTML，但我一直无法让它工作。我没有致力于纯CSS解决方案，jQuery会没事的。任何帮助将非常感激。感谢