Create dynamic border on an image after marking a checkbox

Question

as I do for when I click on checkbox it dynamically mark an image with edge. I’m trying to do but it always marks all the img how could I do that. Note: mine img comes from the bank this all dynamic.

dynamic part php:

<div class="btn-group" data-toggle="buttons">
    <label class="check btn btn-primary">
        <input type="checkbox" name="ck[]" value="$imagem" id="$id"> Selecionar
    </label>
<div>

jquery part

$(".check").click(function(){
    $("img").toggleClass('clic');
});

Obs. with this code I can mark the img however all and not and that I want I wanted to mark only the respective ones I click. example c I click on the first img mark only her and then if I mark the fifth img mark only her. at the end I will have 2 marked that I chose to img 1 and 5

full php code:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli);

Answer 1

The ideal would be to see how is generating the HTML of the images but the idea is, let’s assume that the "value" of the checkbox that has $image, is the same "id" of the image. That is to say

Then it would look like this:

$(".check").click(function(){
   $('#'+$(this).val()).toggleClass('clic');
});

Edit:

I suggest you use this helper id that you are already using for the checkbox in the image we will also add 100 in it not to mix looks just like it would look:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $idimg = $aux['id']+100;
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" id=\"$idimg\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\" imgref=\"$idimg\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli)

So I created an auxiliary id for the image and put it in the id attribute of the img, and also created an imgref tribute in the checkbox to leave the id there. The js would look like this now:

   $(".check").click(function(){
       $(this).closest('img').toggleClass('clic');
    });