Compare different div attributes from the same html file

Question

my question is: I have a div with a checkbox and another with an image, I would like that after the user marks the div with checkbox and clicks on a confirmation button, my js function checks if the checkbox is checked and if it is it compares the checkbox id attribute is equal to the image value and if it is it hides the checkbox and shows the image.

The html is:

<div class="toggle div-inline" style="display: "> 
    <input type="checkbox" id="consultar_acervo"  name="toggle"> <span>Consultar Acervos</span> 
    <label for="consultar_acervo"></label>
  </div>

    <div class="column zoom" style="display:none">
    <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
      <img src="../images/img_nature.jpg" alt="Fjords" style="width:100%" value="consultar-acervo" id1= "icons">
    </a>

<div class="col-sm-1">
<button type="button" class="btn btn-success" id="aplica" onclick="checar()"> Aplicar</button>

in javascript I have already managed to do the function that checks if the checkbox is checked, I know that this comparison of attributes is done inside the if but do not know how to do it, vcs can help me?

The Js file

function checar(){

var checa = document.getElementsByName("toggle");

for (var i=0;i<checa.length;i++){ 
    if (checa[i].checked == true){ 
        // CheckBox Marcado... Faça alguma coisa...

    }  else {
       // CheckBox Não Marcado... Faça alguma outra coisa...
    }
}

}

Answer 1

1 - With pure javascript using attribute date

Any attribute of any element in which the attribute name starts with data- is a date attribute, which can be read through the property dataset.

example:

<elemento id="qqid" data-id="valorId"> 
var qqvar = document.getElementById('qqid');
var valor = qqvar.dataset.id; //valorId

The date attribute name needs to be preceded by the term "date-" and needs at least one character after the hyphen within the HTML name patterns.

Applying to your script

function checar(){

    if(document.getElementById("check").checked == true){
        alert("CheckBox Marcado... Faça alguma coisa...");
                    
          var atributoIdCheckbox = document.getElementById('check');
          var dataCheckbox = atributoIdCheckbox.dataset.id;
          console.log(dataCheckbox);

          var atributoIdCheckbox = document.getElementById('icons');
          var dataImage = atributoIdCheckbox.dataset.id;
          console.log(dataImage);
                    
            if (dataCheckbox==dataImage){
               document.getElementById("zoom").style.display = 'block';
               document.getElementById("consulta").style.display = 'none';
               document.getElementById("aplica").style.display = 'none';
            }else{
                 alert("diferentes");
            }

     }  else {
        alert("CheckBox Não Marcado... Faça alguma outra coisa...");

     }

}

<div id="consulta" class="toggle div-inline"> 
    <input type="checkbox" id="check" data-id="consultar-acervo" name="toggle"> <span>Consultar Acervos</span> 
    <label for="consultar_acervo"></label>
</div>

<div id="zoom" class="column zoom" style="display: none;">
     <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
     <input type="hidden" value="consultar-acervo"><img src="https://i.stack.imgur.com/iEYos.png" alt="Fjords" style="width:200px" data-id="consultar-acervo" id="icons">
    </a>
</div>
<div class="col-sm-1">
    <button type="button" class="btn btn-success" id="aplica" onclick="checar()"> Aplicar</button>
 </div>

2 - Com Jquery

function checar(){

    if(document.getElementById("check").checked == true){
        alert("CheckBox Marcado... Faça alguma coisa...");
                
        $idCheckbox = $('#check').attr('data-id');
        console.log($idCheckbox);

        $idImage = ($("#icons").data("sample-id"));
        console.log($idImage);
                
        if ($idCheckbox==$idImage){
          $(".zoom").show();
          $(".div-inline").hide();
          $("#aplica").hide();
        }else{
          alert("diferentes");
        }

    }  else {
       alert("CheckBox Não Marcado... Faça alguma outra coisa...");

    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle div-inline"> 
     <input type="checkbox" id="check" data-id="consultar-acervo" name="toggle"> <span>Consultar Acervos</span> 
     <label for="consultar_acervo"></label>
</div>

<div class="column zoom" style="display:none">
     <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
     <input type="hidden" value="consultar-acervo"><img src="https://i.stack.imgur.com/iEYos.png" alt="Fjords" style="width:200px" data-sample-id="consultar-acervo" id="icons">
      </a>
</div>
<div class="col-sm-1">
     <button type="button" class="btn btn-success" id="aplica" onclick="checar()"> Aplicar</button>
 </div>