Know the Nth of the clicked item to select an input on the same Nth?

Question

I have a table where I have a checkbox to enable editing several items at the same time, that is I can edit several items since the input is selected, but I have a problem that if I want to edit only one I don’t have to select the checkbox.

function selecionaCompromissos() {
  var ids = document.getElementsByClassName('agrupaPagto');
  
    gravaArray(ids);
  }

function gravaArray(dados) {
  var array_dados = dados;

  var teste = Array();
  var contador = 0;

  for (var x = 0; x <= array_dados.length; x++) {
    if (typeof array_dados[x] == 'object') {
      if (array_dados[x].checked) {
        teste[x] = array_dados[x].id;
        contador++;
      }
    }
  }
  teste = teste.filter(Boolean);  
  console.log(teste);
}

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Número</th>
      <th>Vencimento</th>
      <th>Parcela</th>
      <th>Valor</th>
      <th>Boleto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="agrupaPagto" id="10" value="125" name="txtAgrupa" type="checkbox"></td>
      <td>Art Pneus</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="2">343</a></td>
      <td>10/10/2017</td>
      <td>2 <b>de</b> 2<span style="color: red"> </span></td>
      <td>R$ 125,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos()">Pagar</a></span></td>
    </tr>
    <tr>
      <td><input class="agrupaPagto" id="11" value="221.00" name="txtAgrupa" type="checkbox"></td>
      <td>Maria Bonita</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="teste">532</a></td>
      <td>18/10/2017</td>
      <td>1 <b>de</b> 4<span style="color: red"> </span></td>
      <td>R$ 221,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos()">Pagar</a></span></td>
    </tr>
  </tbody>
</table>

The application works but has to be selected, but the question is whether the user will edit only one line and select without the need to mark the checkbox?

Answer 1

You can take the checkbox of the line clicked with:

elemento.closest('tr').getElementsByTagName('input')[0];

Analyzing your code, a suggestion is to pass the clicked link sending a this as a parameter in the function selecionaCompromissos(), thus:

<a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a>

In this way, the "element" mentioned above would be that this received in function as i:

function selecionaCompromissos(i) {...

Then you can pass this information on to the other function gravaArray() catching the id of their respective checkbox and create the array with only 1 id. Would look like this:

function selecionaCompromissos(i) {

   var idc = i.closest('tr').getElementsByTagName('input')[0];

   var ids = document.getElementsByClassName('agrupaPagto');

   gravaArray(ids,idc);
}

function gravaArray(dados,idc) {
   var array_dados = dados;

   var teste = Array();

   if(idc != null && !idc.checked){
      teste.push(idc.id);
   }else{
      var contador = 0;
      for (var x = 0; x <= array_dados.length; x++) {
         if (typeof array_dados[x] == 'object') {
            if (array_dados[x].checked) {
               teste[x] = array_dados[x].id;
               contador++;
            }
         }
      }
   }
   teste = teste.filter(Boolean);  
   console.log(teste);
}

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Número</th>
      <th>Vencimento</th>
      <th>Parcela</th>
      <th>Valor</th>
      <th>Boleto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="agrupaPagto" id="10" value="125" name="txtAgrupa" type="checkbox"></td>
      <td>Art Pneus</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="2">343</a></td>
      <td>10/10/2017</td>
      <td>2 <b>de</b> 2<span style="color: red"> </span></td>
      <td>R$ 125,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a></span></td>
    </tr>
    <tr>
      <td><input class="agrupaPagto" id="11" value="221.00" name="txtAgrupa" type="checkbox"></td>
      <td>Maria Bonita</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="teste">532</a></td>
      <td>18/10/2017</td>
      <td>1 <b>de</b> 4<span style="color: red"> </span></td>
      <td>R$ 221,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a></span></td>
    </tr>
  </tbody>
</table>