JSFiddle - React, Tailwind, and code Playground

HTML

<!--Assuming you have these checkboxes, modify them as follows -->
<!--Adding data-target attributes to the checkboxes which contain
    the classes to identify the necessary div-->
<input id="mycheckbox1" type="checkbox" data-target = "circle1">
<input id="mycheckbox2" type="checkbox" data-target = "circle2">
<input id="mycheckbox3" type="checkbox" data-target = "circle3">
<input id="mycheckbox4" type="checkbox" data-target = "circle4">

<!--Adding a general class to the divs-->
<!--Adding a generic class to similar elements also allows 
    you to style all of them together if you want-->
<div class="circle circle1"><img src="http://www.test.com/img.jpg"></div>
<div class="circle circle2"><img src="http://www.test.com/img2.jpg"></div>
<div class="circle circle3"><img src="http://www.test.com/img3.jpg"></div>
<div class="circle circle4"><img src="http://www.test.com/img4.jpg"></div>

JavaScript

$(document).ready(function(){
    //.on("click",function(){ ... }) is just a bit better.
    $('[id^=mycheckbox]').on("click",function(){
        var target = $(this).data('target'); 
        $('.'+target).fadeToggle(500);
    });
});