Ways to enhance the appearance of the parent element when the radio button is clicked

Question

Ways to enhance the appearance of the parent element when the radio button is clicked

Hey there! So, I have a situation where I'm working with two radio buttons and I want to apply certain CSS styles to the parent box (<div>) when a radio button is selected (checked). Here's how I want it to look:

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

Below are my radio buttons within div elements:

<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've been using jQuery for other functionalities related to these buttons, however, I'm a bit uncertain on how to correctly add the border and box shadow only when a radio button is selected. Any tips on this would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

If you want to style radio buttons with CSS, you can create a class with the desired declarations and then use jQuery to add or remove this class from the parent element of the radio buttons. Here's an example:

.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');
});

Check out the working demo here.

To apply the styling on page load, you can add the 'checked' class to the parent div element like this:

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

You can also achieve the same effect dynamically using JavaScript/jQuery:

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

Updated demo available here.

Answer 2

If you want to style radio buttons with CSS, you can create a class with the desired declarations and then use jQuery to add or remove this class from the parent element of the radio buttons. Here's an example:

.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');
});

Check out the working demo here.

To apply the styling on page load, you can add the 'checked' class to the parent div element like this:

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

You can also achieve the same effect dynamically using JavaScript/jQuery:

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

Updated demo available here.

Ways to enhance the appearance of the parent element when the radio button is clicked

Answer №1

Similar questions

Run the function multiple times by substituting a portion of the argument in a sequential

Incrementing pages, starting with page1.html and continuing to page2.html, page3.html, and beyond, for use with the window

Can we add to the input field that is currently in focus?

Static response is the way to go! Asynchronous responses just don't cut it

XSLT transformation eliminates HTML elements from mixed content

creating a mixin for a box-shadow value of none in LESS CSS

Customize the MUI Slider Component with unique colored thumbs

Make the HTML element expand to the remaining height of the viewport

Prevent the Swiper slider from autoplaying while a video is being played, and automatically move to the next slide once the video is paused or

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

including identical item in the array

Utilizing JavaScript to call functions from an ASP.NET code file

What is the best way to update and add data with just one click using jQuery?

Populate object values dynamically through function invocations

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in

Concealing overflow for text content through CSS styling

Deliver Compressed Files following Angular CLI --Prod Configuration

Troubleshooting three.js exceeding 2-minute load times and crashing issues

Create a new template following rendering in VueJS