JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<label for="a" class="imag_box">
    <img src="http://placehold.it/150/000000/ffffff" style='cursor:pointer;'>
    <input name="a" type="checkbox" id="a" style="display:none">
</label>

<label for="a" class="imag_box">
    <img src="http://placehold.it/150/000000/ffffff" style='cursor:pointer;'>
    <input name="a" type="checkbox" id="a" style="display:none">
</label>

<label for="a" class="imag_box">
    <img src="http://placehold.it/150/000000/ffffff" style='cursor:pointer;'>
    <input name="a" type="checkbox" id="a" style="display:none">
</label>

JavaScript

$('.imag_box img').hover(
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://placehold.it/150/000000/fbaf5d');
         }
      },
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://placehold.it/150/000000/ffffff');
         }
     }
  );


$(".imag_box img").click(function() {
    if($(this).next().val() !== "1") {
         $(this).attr("src", "http://placehold.it/150/000000/00ff18");
         $(this).next().val("1");
    } else {
         $(this).attr("src", "http://placehold.it/150/000000/ffffff");
         $(this).next().val("0");
    }
});