Retrieve a checkbox id by the class using getElementsByClassName()?

Asked

Viewed 164 times

1

I am populating a table with data coming from the database, the ids are dynamic using the database id, need to recover 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 am new in javascript and am not finding the solution I’ve read the documentation on this Link, but I couldn’t find the solution

javascript

3 answers

4


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

The code could go 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>

  • 1

    thank you very much, it was exactly my question.

  • Now I have another problem regardless of the amount of data selected always carries two commas before the data, example if selecting two items is like ",33,67", which can be?

  • 1

    @Wagnerfernandomomesso gives me the idea that you’re not using the selector I indicated: 'table :checked. But if you want to put here a jsFiddle that I can take a look at.

  • I did what you asked me https://jsfiddle.net/3mv1weL5/, and I did according to your indication anyway, my table is contained in a while and comes in php code I have already checked the whole php structure and it’s all right, if you say that jsFiddle is I will rewrite my code, thank you.

  • @Wagnerfernandomomesso https://jsfiddle.net/5s9nwg8w/ <- works well.

2

Wagner, by what I noticed your code is already picking up the element ID through the method getElementsByClassName(), only have some problems that may be confusing you. The second element <input type="checkbox" id="90" value="90"> is without the edit class(class="editar"), IE, through your code you will not get his ID. The second problem is that your went to array_dados.length, in your case you should go up array_dados.length-1 or simply switch to x < array_dados.length not to pop an error. Follow a code containing these 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>

  • I liked the remarks and am understanding the problems pointed out, thank you very much.

1

You can do it this 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>

  • thanks, I realized that there were some flaws in my code and with the help of the community I was able to solve.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.