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

Is there a way to soften the repetitive elements in the background image?

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Building a Many-to-Many Relationship in Node.js Using Sequelize.js

Display data in Highchart legend only if it has values

Fire the onChange Event after the Select (Combobox) has been modified via a PHP Script

Using JQUERY to create a smooth sliding transition as images change

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Information sent to a slot does not trigger a response

I require assistance on how to properly arrange images in a div so that they stack

Unlimited scrolling: Fetching additional data via an Ajax request?

Is the disable feature for React buttons not functioning properly when incorporating Tailwind CSS?

A method to eliminate the mouse-over effect following the selection of an input box

Vue-Router functions only on specific routes

Step-by-step guide for building and populating a JavaScript Dictionary

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

I am experiencing an issue with my d3 force directed graph where the links are not

Dynamically load scripts in angularJs

Assign a value to a locally scoped variable within an iteration in Angular 2

How can I utilize the value of a jQuery variable in PHP code?

Large data sets may cause the Highchart Bar to not display properly