How to return a value from a checked column?

Asked

Viewed 40 times

0

I’m trying to get the ID of the selected line with :checked but I’m not getting it.

HTML

<table id="dividas">
    <thead class="thead-inverse">
        <tr>
             <th>#</th>
            <th>ID</th>
            <th>Nome</th>
            <th>Fone</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>01</td>
                <td>Pedro</td>
                <td>+55 82 866 869 869</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>02</td>
                <td>Carlos</td>
                <td>+55 82 866 869 869</td>
            </tr>

        </tbody>
</table>

SCRIPT

$('#save').click(function () {
            $('#dividas').find('input[type="checkbox"]:checked').each(function () {

                //retornar valor de uma coluna
          });

       });
javascript jquery

2 answers

1


You can do something like this:

const $inputs = $('#table-data td input');
const $button = $('#save');

$button.on('click', () => {
  const ids = [];
  
  $inputs.each(function() {
    const $input = $(this);
    
    // Adicione o ID à lista caso o input estiver marcado:
    if ($input.prop('checked')) {
      const id = $input.parent().next().text();
      ids.push(id);
    }
  });
  
  // Faça o que quiser com os IDs.
  console.log(ids);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table
  id="table-data"
  class="table table-striped table-inverse table-responsive"
>
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>ID</th>
      <th>Nome</th>
      <th>Fone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>01</td>
      <td>Pedro</td>
      <td>+55 82 866 869 869</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>02</td>
      <td>Carlos</td>
      <td>+55 82 866 869 869</td>
    </tr>
  </tbody>
</table>

<button id="save">Salvar</button>

It’s worth noting that with modern Javascript, we can do many things (all, in fact) more easily than jQuery.

See how the above code would look with a slightly more declarative paradigm and without using jQuery:

const inputs = document.querySelectorAll('#table-data td input');
const button = document.querySelector('#save');

button.addEventListener('click', () => {
  const ids = [...inputs]
    .filter((input) => input.checked)
    .map((input) => input.parentElement.nextElementSibling.textContent);

  console.log(ids);
});
<table id="table-data">
  <thead>
    <tr>
      <th>#</th>
      <th>ID</th>
      <th>Nome</th>
      <th>Fone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>01</td>
      <td>Pedro</td>
      <td>+55 82 866 869 869</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>02</td>
      <td>Carlos</td>
      <td>+55 82 866 869 869</td>
    </tr>
  </tbody>
</table>

<button id="save">Salvar</button>

  • Very good this code, but the idea is to take all the Ids of the selected lines for me to send to a REQUEST and execute a QUERY.

  • Ah, beauty! I got the question wrong, pardon... :v I will edit the answer...

  • Luiz, your code is gone. I did a test with a code posted and it worked here, but it is no longer posted.

  • That’s right. Thank you very much

1

Try this code:

let inputsCheck = [];

$("button").click(function() {

  inputsCheck = [];

  $("input[type='checkbox']").each(function(ev, elemt) {
  
 if (elemt.checked) {
  //Se quiser pegar somente o ID e jogar no inputsCheck array, então
  //faça assim: elemt.id no lugar de elemt, abaixo:
  inputsCheck.push(elemt);
  
   }
 });

  //Elementos marcados
  console.log(inputsCheck);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="dividas">
        <thead class="thead-inverse">
            <tr>
                 <th>#</th>
                <th>ID</th>
                <th>Nome</th>
                <th>Fone</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" id="id_1"></td>
                    <td>01</td>
                    <td>Pedro</td>
                    <td>+55 82 866 869 869</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="id_2"></td>
                    <td>02</td>
                    <td>Carlos</td>
                    <td>+55 82 866 869 869</td>
                </tr>

            </tbody>
    </table>
    <button>Salvar</button>

Browser other questions tagged javascript jquery

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