How to select element inside label on input radio select

Question

I have a project on Laravel 8. I'm trying to let people change their profile picture from a gallery. That's how I display all the available images

@foreach(glob(storage_path('app/public/gallery/*.png')) as $image)
    <div class="col-2 mb-3">
        <label for="{{ basename($image, '.png') }}" class="w-100">
            <img src="{{ url('storage/gallery/' . basename($image)) }}" width="100px" height="100px" />
            <input type="radio" name="profilephoto" value="{{ url('storage/gallery/' . basename($image)) }}" id="{{ basename($image, '.png') }}" />
        </label>
    </div>
@endforeach

(FREE HTML)

<label for="photo1" class="w-100">
    <img src="https://example.com/storage/gallery/photo1.png" width="100px" height="100px" />
    <input type="radio" name="profilephoto" value="https://example.com/storage/gallery/photo1.png" id="photo1" />
</label>
<!-- ... more labels&inputs -->

And I'm trying to select through jQuery the <img> element so I can add some visual effects to it. That's how I'm trying to do it:

$('input[type="radio"][name="profilephoto"]').on('change', function() {
    $('label[for="' + $(this).attr('id') + '"]').find('img').addClass('border')
});

But it's not working. Any idea how to do it?

Answer 1

Here is your soulution:

1. Create an onclick function on the radio button and pass this like:

onclick="some(this)"

2. In that function recieve it in a parameter and get its parent like:

some(eve) {
  parent = $(eve).parent();
}

3. then find the image tag in it like:

image = $(parent).find(img);

4. Now apply whatever css you want to this element in image variable.