Form CSS: Styling a radio box's parent (label) based on checked / unchecked status

问题

So i have a form. Most of the questions asked in the forms are using Radio inputs.

i'm going with

<label>Option1
    <input type="radio">
</label>
<label>Option2
    <input type="radio">
</label>

I'm styling the Labels using :hover, giving it a subtle background change to indicate which option you are highlighting. However, i want the label for the selected option to have a different colored background. Is there any way of doing this using CSS, or do I have to go with jQuery? What i want to do is declare a style for the parent (label) of the checked input box.

Upon further brainstorming i'd like to change the parent fieldset's bkg-color upon having all required fields filled in. I'm starting to feel jQuery is the way to go here..?

[Notes:] Using HTML5 / CSS3 / jQuery. Only has to be compatible with Chrome or Firefox. This is something that is to run locally on a laptop, so as long as it runs fine on that computer I don't have to worry about compatibility on older browsers etc. :)

Edit: Solution posted by Nick Carver. A few additions to get this to work properly with radio buttons. Posting for completeness:

$('input[type="radio"]').change(function() {
    var tmp=$(this).attr('name');
    $('input[name="'+tmp+'"]').parent("label").removeClass("checked");
    $(this).parent("label").toggleClass("checked", this.selected);      
});

$('input[type="checkbox"]').change(function() {
    $(this).parent("label").toggleClass("checked", this.selected);
});

回答1:

There isn't a way with pure CSS, since you're styling a parent and not a child. If you did it in jQuery you'd do something like:

$("fieldset :radio").change(function() {
  $(this).closest("label").toggleClass("onClass", this.checked);
});

The overall <fieldset> styling would depend on your markup, if you have some sort of container each radio set is in you could check if none of those had a :checked element within...if they all do, then use the same .toggleClass() approach to set that "all checked" class on or off.

回答2:

Can't do it with vanilla CSS. You'd need to use jQuery to add some onclick behavior to the radio boxes that add/remove a class from the label for selected. Then you could add the :hover class to your selector. For best results I think that you'll need to make sure your labels are set to display:inline-block; for best results.

回答3:

I would like to argue that this can be done with pure CSS, but it's about how you structure your HTML & CSS. You don't need to use Javascript / jQuery for any of this, it's just about being sensible with your hierarchy and DOM structure.

.wrapper input[type=checkbox] {
  display: none;
}

.wrapper label {
  width: 100%;
  height: 100%;
}

.wrapper input[type=checkbox]:checked+label {
  background-color: #000;
  color: #fff;
}

<fieldset class="wrapper">
  <input id="YourId" value="YourValue" type="radio">
  <label for="YourId">
        Your Label
    </label>
</fieldset>

You can use any element you want to wrap, a <fieldset>, a <div> or whatever floats your boat. The reality is that structuring your DOM / HTML in a certain way can mean the difference between needing to use Javascript, or maybe even a whole library (jQuery) for quite a simple solution.

Sorry for posting in quite a dated topic, but I just wanted to showcase that the use of Javascript / jQuery really isn't needed for something such as this.

来源：https://stackoverflow.com/questions/4059458/form-css-styling-a-radio-boxs-parent-label-based-on-checked-unchecked-stat

标签

jquery

css

selector

parent