How to add style to the parent when radio button is selected


Tags: javascript,jquery,html,css

Problem :

Hi I have two radio buttons and want when radio button is selected (checked) the parent box (<div>) to have these CSS styles:

box-shadow: 0 0 5px #5cd053;
border-color: #28921f;

Here is my radio buttons with div`s:

<div class="delivery_option alternate_item">
    <input class="delivery_option_radio" type="radio" name="delivery_option[0]" onchange="mydisplayudpate();updateCarrierSelectionAndGift();" id="delivery_option_0_1" value="6," checked="checked">
</div>

<div class="delivery_option item">
    <input class="delivery_option_radio" type="radio" name="delivery_option[0]" onchange="mydisplayudpate();updateCarrierSelectionAndGift();" id="delivery_option_0_0" value="7,">
</div>

I use jQuery for other functions about these buttons but i`m not sure how to add border and box shadow properly only when radio button is selected.



Solution :

You could add the CSS declarations within a class and add/remove the class to the parent element of the radio buttons, as follows:

.checked {
  box-shadow: 0 0 5px #5cd053;
  border-color: #28921f;
}

jQuery:

var $radios = $('input:radio');

$radios.change(function () {
    $radios.parent().removeClass('checked');
    $(this).parent().addClass('checked');
});

WORKING DEMO.

In order to apply the effect once the page is loaded, you could add the class name to the correspond div parent element:

<div class="delivery_option alternate_item checked">
    <input type="radio" checked="checked">
</div>

Or do the same dynamically via JavaScript/jQuery:

$('input:radio').filter(':checked').parent().addClass('checked');

UPDATED DEMO.


    CSS Howto..

    How to make an element with opacity 0 unclickable

    how to avoid firefox to add overlay color on image click?

    How to create generic CSS class with input parameter

    how to display navigationMenu div left side of the slider

    Rails How to include a scss file in a specific erb view? [duplicate]

    How do you create an arrow for sub navigation like this?

    How to create a table using multiple span in one div using CSS

    how is the search mail button implemented?

    Show/Hide (Read More) Text Depending on Number of Character Pure CSS

    How can I put CSS and HTML code in the same file?

    How to copy the CSS to another tab in Chrome?

    I applied CSS auto-resizing to image, now how do I push it to the background?

    How can i change background image opacity without changing on div content? [duplicate]

    How to add shadow 'wings' to a centered content div

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How can I add a coloured square in front of several list items?

    How to style radcombobox item so that words that wrap are separated

    css how to make an elements margin-bottom go to bottom of its container

    How can I control when my css transitions happen and when they don't?

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    How to turn off element CSS background when dragged

    How to animate through stacked images Javascript

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to place an image and text under it, side by side using HTML and css?

    How do I add an image directly below a text header?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to hide text behind image

    How to hide overflow on slideshow without hiding arrows?

    CSS select: how to count and select child of a specific class only?

    How to adapt height of an element to another in CSS