Uncheck Checkbox

Asked

Viewed 93 times

0

I need a function that unchecks the checkbox when the row passes the table. Currently, when I move the row from one table to another, the checkbox is still checked and this hinders, I need that when I move to another table, the checkbox is unchecked.

If anyone can help me, I’d appreciate it! 

<body>
<form>
    <input type='text' id='name' placeholder='Nome aqui'>
    <input type='text' id='email' placeholder='E-mail aqui'>
    <input type='button' class='add-linha' value='Adicionar Linha'>
</form>
<table class='tbmain'>
    <thead>
        <tr id='textos'>
            <th>Checkbox</th>
            <th>Nome</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr id='input'>
            <td><input type='checkbox' name='record'></td>
            <td>Eduardo Nunes</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>
<button type='button' class='deletar-linha'>Deleter Linha</button>
<button type='button' class='mudar-linha'>Mudar para Em Tratamento</button>


<table class='tbtransfer'>
    <thead>
        <tr id='textos'>
            <th>Checkbox</th>
            <th>Nome Recebido</th>
            <th>Email Recebido</th>
        </tr>
    </thead>
    <tbody>
        <tr id='input'>
            <td><input type='checkbox' name='transfer'></td>
            <td>Test User</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


<script>

    /* Adiciona linhas */

    $(document).ready(function () {
        $('.add-linha').click(function () {
            let name = $('#name').val();
            let email = $('#email').val();
            let adc = '<tr><td><input type="checkbox" name="record"></td><td>' + name + '</td><td>' + email + '</td></tr>';
            $('.tbmain tbody').append(adc);
        });


        $('.mudar-linha').click(function () {
            $('table tbody').find('input[name="record"]').each(function () {
                if ($(this).is(':checked')) {

                    $('.tbtransfer tbody').append($(this).parents('tr'));

                }
                else ($(this).is(':checked' === false ));
            })
        })


        /* Procura e remove as linhas selecionadas */

        $('.deletar-linha').click(function() {
            $('table tbody').find('input[name="record"]').each(function () {
                if($(this).is(':checked')){
                    $(this).parents('tr').remove();
                }
            })
        })
    })


</script>
javascript html checkbox table

  • If the answer below solved your problem and there was no doubt left, mark it as correct/accepted by clicking on the " " that is next to it, which also marks your question as solved. If you still have any questions or would like further clarification, feel free to comment.

1 answer

2

Below that line

 $('.tbtransfer tbody').append($(this).parents('tr'));

place

this.checked = false;


/* Adiciona linhas */

$(document).ready(function() {
  $('.mudar-linha').click(function() {
    $('table tbody').find('input[name="record"]').each(function() {
      if ($(this).is(':checked')) {
        $('.tbtransfer tbody').append($(this).parents('tr'));
        this.checked = false;
      }
    })
  })

  /* Procura e remove as linhas selecionadas */
  $('.deletar-linha').click(function() {
    $('table tbody').find('input[name="record"]').each(function() {
      if ($(this).is(':checked')) {
        $(this).parents('tr').remove();
      }
    })
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</form>
<table class='tbmain'>
  <thead>
    <tr id='textos'>
      <th>Checkbox</th>
      <th>Nome</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr id='input'>
      <td><input type='checkbox' name='record'></td>
      <td>Eduardo Nunes</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>
<button type='button' class='deletar-linha'>Deleter Linha</button>
<button type='button' class='mudar-linha'>Mudar para Em Tratamento</button>


<table class='tbtransfer'>
  <thead>
    <tr id='textos'>
      <th>Checkbox</th>
      <th>Nome Recebido</th>
      <th>Email Recebido</th>
    </tr>
  </thead>
  <tbody>
    <tr id='input'>
      <td><input type='checkbox' name='transfer'></td>
      <td>Test User</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Browser other questions tagged javascript html checkbox table

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