0

I am currently overlaying a radio box on top of a unique image (found help here on stackoverflow: How can I display the checkbox over the images for selection? and http://jsfiddle.net/erSBP/1/) and it's working like the example.

However, I would like to remove the radio box so that only the unique image remains and is clickable and sends the checked value just as a normal radio button would.

The radio box input ID's are generated dynamically so I can't specify what they are named.

Is there any way to do this with Javascript or JQuery?

My current configuration is:

<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="javascript:setTimeout('__doPostBack(\'965968404\',\'\')', 0)" value="8404" name="96596">
</div>
Community
  • 1
  • 1
gandjyar
  • 1,145
  • 2
  • 10
  • 15

2 Answers2

1

Your code is messed up. Firstly, don;t use setimeout. Just call dopostback. Secondly, you're using a javascript url on an onlick attribute. Don't do that unless you calling it through the href attribute for who knows what reason. All in all, don't use javascript urls. Here's what your code should look like

<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="__doPostBack(\'965968404\',\'\')" value="8404" name="96596">
</div>
Kpower
  • 1,237
  • 3
  • 11
  • 19
  • I am not able to change the code as it generated in the core of the nscommercespace platform. Thank you though, for your feedback. Any suggestions on how to make the image clickable and hide the checkbox or radio button? – gandjyar Aug 15 '12 at 16:17
  • `` would make the image clickable – Kpower Aug 15 '12 at 16:49
0

If you were looking to do this with a checkbox, you could do something like this with jquery​

$(document).ready(function () {
    $(".answer").each(function() {
        var p = $(this).find("input:checkbox");
        p.hide();
        $(this).find("img").click(function() {
            p.prop("checked", true);
        });
    });
});

As this will set the input to hidden, and trigger a click event to select the checkbox. It will match the Image and the Input as contained in same "answer" div. You could adapt this to work with a radio, you would just need to know which option you wanted to select.

jcern
  • 7,798
  • 4
  • 39
  • 47
  • I switched from radio buttons to checkboxes and then tried this answer but it didn't hide the checkboxes. – gandjyar Aug 15 '12 at 16:15
  • Hmm, I thought I had tried it before posting. I edited the post, and hopefully the new code should work for you. – jcern Aug 15 '12 at 16:31
  • Thank you, I'm going to try your solution now. Side note: I found another example that works great in Firefox, but does not work at all in IE, any ideas why it doesn't work in IE? – gandjyar Aug 15 '12 at 18:17
  • Your code worked for me in Firefox, but once I clicked the image, the checkbox reappeared. However, it didn't work at all in IE. – gandjyar Aug 15 '12 at 18:22
  • Hmm, the click portion worked for me in IE. If the element is not submitting, you can try replacing the p.hide() with p.css("visibility", "hidden") since display:none may prevent the browser from submitting the value. Also, the p.prop("checked") will check the box, but if you want to call the action change it to (or augment with) p.click() – jcern Aug 15 '12 at 18:49