0

I'm working on a Joomla page in which there are rows of 4 radio buttons (labelled A B C and D) displayed down the page as part of a multiple choice test. Each set of radio buttons is in a table. The radio buttons have been replaced by images. Here is the HTML showing part of a row of radio buttons:

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>

I followed, as an example, the code set out here Change image on radio button click using JS or HTML but I've been unable to get it to work. I'm not committed to a pure CSS solution, jQuery would be fine. Any help would be much appreciated. Thanks

Community
  • 1
  • 1
RoyS
  • 1,439
  • 2
  • 14
  • 21
  • 1
    Your `img:nth-child(2)img:nth-child(1)` selector is invalid. Use `img:nth-child(2)` or `img:nth-child(1)` alone. – Mohammad Oct 02 '16 at 13:21
  • Sorry about that, I corrected the mistake - input[type='radio'] {display:none;} input[type = "radio"] > img:nth-child(2) { display: none;} input[type = "radio"]:checked + img:nth-child(1) { display: none;} input[type = "radio"]:checked + img:nth-child(2) { display: inline-block;} but the code still doesn't work. – RoyS Oct 02 '16 at 14:19
  • Also `img` isn't child of `radio`. Change it to`input[type="radio"] + img:nth-child(2)` – Mohammad Oct 02 '16 at 14:30
  • 1
    Check https://jsfiddle.net/nyp3hcqw/ – Mohammad Oct 02 '16 at 14:39
  • @Mohammad, While the images are showing up in the jsfiddle, that's not exactly what's needed. The images need to replace the radio buttons entirely and when an A image is clicked, it is replaced by a modified A image, showing it has been clicked, and so on for the other B, C, and D images. Basically, it is a matter of replacing the standard radio buttons with images. I'm sorry if I did not make that clear at the beginning. Many thanks for your help. – RoyS Oct 03 '16 at 01:59
  • I found that Divine Comedian's HTML/CSS solution at http://stackoverflow.com/questions/31166862/change-image-on-radio-button-click-using-js-or-html works well Thanks – RoyS Oct 07 '16 at 21:43

0 Answers0