CODEWITHSUNDEEP
javascriptjquery
soum
soum

Reputation: 1159

replacing default radio with images

I am trying to achieve two things here. 1: I am trying to show content on clicking the radio button 2: I am trying to replace the default radio button with images

I could have completely eliminated the idea of radio and just do a click show with images but the ultimate task is to capture the users input and send is as an email. I am excluding that part in this question. My solution works fine in chrome but in IE 8 I am not able to show content. in IE 9 it works

Here is my current attempt:

JavaScript:

  $(function(){

  var options = $('#options').find('input');
    options.click(function(){
      var id = "opt" + $(this).val();
      $(".optDivs").hide();
      $("#" + id).show();

    });

  var selections = $('#selections').find('input');

    selections.click(function(){
      var id = "opt" + $(this).val();
      $(".slctDivs").hide();
      $("#" + id).show();

    });

  });

Html:

<html><head>    
<style>
    #one{
        position:absolute;
        left:-99999999;
    }
</style>
</head>
<body>

    <div id="options">
        <div class="opt1">
            <input type="radio" name="primary" id="one" value="1"> 
            <label for="one"><img width="50px" src="http://gfxlovers.com/smilies/imgs/smiling/smiling025_2.gif"></label>
        </div>
      <div class="opt2"><input type="radio" name="primary" value="2"> Option 1</div>
      <div class="opt3"><input type="radio" name="primary" value="3"> Option 1</div>
    </div>

    <div id="opt1" class="optDivs" style="display:none;">content option 1</div>
    <div id="opt2" class="optDivs" style="display:none;">content option 2</div>
    <div id="opt3" class="optDivs" style="display:none;">content option 3</div>


    <div id="selections">
      <div class="opt4"><input type="radio" name="secondary" value="4"> Option 2</div>
      <div class="opt5"><input type="radio" name="secondary" value="5"> Option 2</div>
      <div class="opt6"><input type="radio" name="secondary" value="6"> Option 2</div>
    </div>

    <div id="opt4" class="slctDivs" style="display:none;">content option 5</div>
    <div id="opt5" class="slctDivs" style="display:none;">content option 6</div>
    <div id="opt6" class="slctDivs" style="display:none;">content option 7</div>



<div id="chrome_hitahintpanel" style="opacity: 0; display: none;"><input id="chrome_hitahintinput" type="text"></div><div id="chrome_hintswindow"></div><div id="chrome_linksearchpanel" style="opacity: 0; display: none;"><input id="chrome_linksearchinput" type="text"></div></body></html>

You can see it hosted and working here.

Any idea what am I missing here?

Upvotes: 0

Views: 64

Answers (1)

hurrtz
hurrtz

Reputation: 2003

You should hide your radio elements with CSS and show images instead. You should then capture the images in jquery (or similar) to check if one of the images is being clicked. If it is: Add a checked-attribute to the corresponding radio-element.

Upvotes: 1

Related Questions