Retrieve the id of a checkbox for the class using getElementsByClassName ()?

Navigation
1

I'm populating a table with data coming from the database, the ids are dynamic using the database id, I need to retrieve these ids with javascript, follow the code as an example. 

function selecionaDactes(){
   var ids = document.getElementsByClassName('editar');         
   gravaArray(ids);         
}  
        
function gravaArray(dados){
   var array_dados = Array;
   array_dados = dados;
   for(var x = 0; x <= array_dados.length; x++){
       if(array_dados[x].checked){
            alert(array_dados[x].value);
       }else{                
            alert('não há dados selecionados' + array_dados[x].value);
        }
    }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>

I'm new to javascript and I'm not finding the solution I've already read the documentation on this Link , but I did not find the solution

    
asked by anonymous 03.05.2017 / 23:43

3 answers

4

You can use the :checked selector that gives you all the selected checkboxes.

The code could look like this: 

function selecionaDactes() {
  var selecionadas = document.querySelectorAll('table :checked');
  var ids = [].map.call(selecionadas, function(el) {
    return el.id;
  });
  gravaArray(ids);
}

function gravaArray(dados) {
  alert(dados);
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>
    
04.05.2017 / 06:13
2

Wagner, so I noticed your code is already taking the element ID with the getElementsByClassName() method, there are only a few issues that might be confusing you. The second element <input type="checkbox" id="90" value="90"> is without the edit class ( class="editar" ), meaning that through your code you will not be able to get its ID. The second problem is that yours goes to array_dados.length , in your case you should go to array_dados.length-1 or simply change to x < array_dados.length so as not to burst an error. Here is a code that contains those changes. 

function selecionaDactes() {
  var ids = document.getElementsByClassName('editar');
  gravaArray(ids);
}

function gravaArray(dados) {
  var array_dados = Array;
  array_dados = dados;
  for (var x = 0; x < array_dados.length; x++) {
    if (array_dados[x].checked) {
      alert(array_dados[x].value);
    } else {
      alert('não há dados selecionados' + array_dados[x].value);
    }
  }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>
    
04.05.2017 / 00:04
1

You can do it that way. 

function selecionaDactes(){
   var ids = document.getElementsByClassName('editar');
   gravaArray(ids);         
}  
        
function gravaArray(dados){
   var array_dados = dados; 
  
   for(var x = 0; x <= array_dados.length; x++){     
        if(typeof array_dados[x] == 'object'){
          if(array_dados[x].checked){
            alert("O ID " + array_dados[x].id +" está marcado")           
          }
        }      
   }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="editar" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>
    
04.05.2017 / 03:19
What is the use and where can I use C #? Pick name through user ID