Checkbox functionality clicking on images instead of checkboxes

I am building a checkbox to select an employee name among several employees. But since I am showing the employees image,

My code is like that:

HTML /Blade:

@foreach($all_employees as $employee)
<input type="radio" name="employee" value="{{ $employee->id }}">
<img class="img-circle mr-2" src="{{URL::to('/images/' . $employee->img_slug)}}" alt="$employee->firstname">
@endforeach

CSS

.select-mitarbeiter input + img{
  filter: grayscale(100%);
}

.select-mitarbeiter input[checked] + img   {
  filter: grayscale(0%);
}

I want to: - I would like to get rid of the checkbox and click directly on the image itself. - to show the unchecked images in black and white and when I click (check) on an image this one should be shown in colors.

This is what I got now:

This is what I want to achieve:

But I do not get it. Is it possible to do it without JavaScript just with HTML?