Compare different div attributes of the same html file

Question

Compare different div attributes of the same html file

Navigation

#1 by (2 votes)

1

my question is: I have a div with a checkbox and another one with an image, I would like that after the user tags the div with checkbox and click on a commit button, my function in js would check if the checkbox is checked and if it is it compares of the 'id' attribute of the checkbox is equal to the 'value' of the image and if 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>

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...
    }
}

}

javascript html

asked by anonymous 08.04.2018 / 19:14

1 answer

Use extra space beyond what is reserved by "malloc" div align right

score 2 · Accepted Answer

1 - With pure javascript using attribute data

strong>

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

example:

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

The date attribute name must be preceded by the term "data-" and need at least one character after the hyphen within the name patterns in HTML.

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 - With 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><divclass="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>