How to apply CSS(background image) to radiobutton when it clicks?

i have set of radio buttons like below,

    <input type="radio" NAME="pizzasize" value="1"/>100&#37; of the time<br />
   <input type="radio" NAME="pizzasize" value="2" />75&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="3"/>50&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="4"/>25&#37; of the time<br />

i need to 开发者_如何学Pythonchange the radiobuttons format like the image in the above. How can i do this?..

Thanks Ravi

The easiest thing would probably be to define a class for "selected" and then just assign that class to the checked option of the radiobuttonlist.

$("#whatevertheparentidis :radio").removeClass("selected");
$("#whatevertheparentidis :checked").addClass("selected");

You can define the image as the background image on the .selected class.

Appart from setting a class on selection via javascript/jquery, you could use pseudo-class selector like :checked. See browser compatibility.

You'll want to put the radio buttons in labels and apply the background styling to the label primarily (you can also add styling to the radio buttons themselves, but remember that their text is a separate element). Unfortunately, since CSS doesn't have the :contains pseudo-class that was discussed at one point (because of performance concerns), you will be forced to throw a bit of JavaScript at it.

Example (live copy):

CSS:

label.highlight {
    background-color: yellow; /* Or whatever, obviously */
}

input[type=radio] {
    /* Styles you want applied to the radio buttons when *not* selected */
}

label.highlight input[type=radio] {
    /* ...any styles you want applied to the radio button when
       it's selected; this is more broadly cross-compatible
       than :checked, sadly */
}

HTML:

<label><input type='radio' name='foo' value='1'> One</label>
<br><label><input type='radio' name='foo' value='2'> Two</label>
<br><label><input type='radio' name='foo' value='3'> Three</label>

JavaScript using jQuery:

jQuery(function($) {

  $("input:radio").click(function() {
    if (this.checked) {
      $("label.highlight").removeClass("highlight");
      $(this).closest("label").addClass("highlight");
    }
  });

});

Obviously, you'll want to narrow those selectors a bit for your actual markup, as the above will apply to all radio buttons on the page...

That works by styling the radio buttons themselves in one way when they aren't inside a label with class highlight, and a different way when they are. Then you simply toggle the highlight class on the label when the radio button is clicked, and CSS takes care of the rest, styling both the label (to get the background color/image) and the radio button (if you want to do fancy checkmarks).

I don't think that background images for radio buttons is supported by any browser. Input objects are generally difficult candidates when it comes to altering their appearence.

I guess that it would be best to style a span or div box with the pictures you want and then connect it to a) hidden radiobuttons (hide it via css) using javascript or b) directly to your database using javascript and php.

First site via Google: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

You can't style the radio button itself (at least, not to the degree you're asking). But nevertheless, there are still ways to achieve the effect you're looking for without Javascript (ie pure CSS that toggles the checked/unckecked images).

See here for a working example of how to do this for a Checkbox.

Radio buttons could be done using the same technique.

The biggest down-side of this is that it uses the CSS :checked selector, which isn't supported by IE8 and lower. Sadly, this is probably enough to make this technique useless, at least for the time being.

In the meanwhile, you'll have to use a Javascript solution. But it could be a very simple bit of Javascript -- most of the CSS in the above link will work in IE8; it's just the :checked selectors -- so you could use classes instead, and simply have Javascript toggle the classname, so it would be a one-line Javascript.

In my scenario I have two sets of radio buttons and I want them to have their own 'highlight' label and I want them to persist within each of their own set. It feels hackish but it works. I don't like writing highlight-work and highlight-status but I'm not sure how I can have the highlight persist within each radio button set.

jQuery(function($) {
    $("input:radio").click(function() {
      if (this.name == [name="posting[role_id]"]) {
        // group 1 clicked
        $("label.highlight-work").removeClass("highlight-work");
        $(this).closest("label").addClass("highlight-work");
      } else if (this.name == [name="posting[status_id]"]) {
        // group 2 clicked
        $("label.highlight-status").removeClass("highlight-status");
        $(this).closest("label").addClass("highlight-status");
      }
    });
});