Laravel set class if radio button selected - laravel

Question

I have these radio buttons:
It's a separate Laravel blade component.
#props(['active'])
#php
$classes = ($active ?? false)
? 'group relative border bg-white py-3 px-4 flex items-center justify-center text-black text-sm font-semibold uppercase focus:outline-none sm:flex-1 shadow-sm cursor-pointer transition duration-150 ease-in-out'
: 'group relative border py-3 px-4 flex items-center justify-center text-gray-300 text-sm font-semibold uppercase focus:outline-none sm:flex-1 shadow-sm cursor-pointer duration-150 ease-in-out';
#endphp
<label {{ $attributes->merge(['class' => $classes]) }}>
<input type="radio" name="size" value="{{ $slot }}" class="sr-only">
<span> {{ $slot }} </span>
<span class="absolute -inset-px pointer-events-none" aria-hidden="true"></span>
</label>
I call it on a different page like so:
<x-product-size>XS</x-product-size>
How do I change the variable if it's selected? I can only find solutions on changing it depending on the route by doing something like this:
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>

Answer 1

You can use JS for this purpose.
add an id to your radio input for example radioID.
<input type="radio" id="radioID" name="size" value="{{ $slot }}" class="sr-only">
and:
<script>
$(document).ready(function () {
$('#radioID').on('change', function () {
var selected = this.value;
if(selected == "XS") // or a variable
var slot = "some data";
{
$("#spanID").append(' + slot + ');
}
});
});
</script>
If you want to add active to a div, span or something other you can do it like this using their CLASS or ID:
$('.someclass').first().addClass('active');
$('#someid').first().addClass('active');