Changing the appearance of a radio button dynamically upon clicking

Question

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful:

foreach ($period as $day){
echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'<br/></label>';
}

Css

.pickup-date-tab label.checked{
background: #6d1f89 !important;
color: #fff; }

jquery

$('#pickupdate').on('click',function(){
        $('#pickupdate').removeClass('checked');
        $(this).addClass('checked');
    });

The issue I'm having is that this code only works for the first button.

jquery css forms radio-button

Answer 1

Answer №1

I have finally found the solution, all thanks to the amazing resources available on this website. It's so satisfying to resolve a related problem.

After some tweaking, here is my updated code snippet:

foreach ($period as $day)
                {
                    echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date"><div class="highlited">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'</div></label>';
                }

Here is the optimized jQuery for handling onclick events:

$(document).on('click','#deliverydate',function(){
    $('#pickupdate').removeClass('checked'); // Updated CSS property
    $(this).addClass('checked'); // Updated CSS property   
});

And don't forget the essential CSS styles:

.pickup-date input[type=radio]:checked + .highlited{
    background: #6d1f89 !important;
    color: #fff;
}

Answer 2

I have finally found the solution, all thanks to the amazing resources available on this website. It's so satisfying to resolve a related problem.

After some tweaking, here is my updated code snippet:

foreach ($period as $day)
                {
                    echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date"><div class="highlited">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'</div></label>';
                }

Here is the optimized jQuery for handling onclick events:

$(document).on('click','#deliverydate',function(){
    $('#pickupdate').removeClass('checked'); // Updated CSS property
    $(this).addClass('checked'); // Updated CSS property   
});

And don't forget the essential CSS styles:

.pickup-date input[type=radio]:checked + .highlited{
    background: #6d1f89 !important;
    color: #fff;
}

Changing the appearance of a radio button dynamically upon clicking

Answer №1

Similar questions

Creating custom Magento extensions with jQuery integration

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Navigating through a website that loads content dynamically with AJAX can be easily done by

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Delaying the standard effect of jQuery on a specific class

Identifying changes in value in any scenario, jQuery

There is no class present in the @Apply layer with Tailwind styling

Trouble with using $.ajax to call a PHP function

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

Unable to append Jquery attribute to a div component

Error: AJAX responseText Mismatch detected

What is the correct way to include variables {{var}} within a {{#each}} loop?

Tips on enlarging a webpage without showing the scroll bar on the main component

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

A guide on how to use Javascript to take a screenshot of an entire webpage

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

jQuery opacity transition not functioning properly while all other animations are working fine

Vuetify's v-badge showcasing an exceptionally large number in style

Ajax is displaying some unusual behavior

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in