how to order asc only the checkboxes that are selected?

Question

how to order asc only the checkboxes that are selected?

Navigation

#1 by (0 votes)

0

Hello, I need your valuable help. I ask you about the situation. I have a table with 4 fields, one of which is a checkbox (select field) Some checkbox fields are already selected by default, and they are messy. what I need to do is to order at the beginning only those selected and those that are unchecked until the end This is the code:

input#buscarUA.form-control(type='text', placeholder='Escribe el texto a encontrar', style='width:25%;')
        br

        table#tablausuariosagregar.table.table-bordered.table-hover(data-toggle='table', data-query-params='queryParams', data-pagination='false', data-search='false', data-height='400')
          thead(style="font-size:12px;background-color:rgb(233,236,239);")
            tr
              th Seleccionar 
              th Perfil
              th Nombre
              th Cuenta

          tbody
            each usuario,index in datos.usuarios
              tr(style='background-color:243,243,243;font-size:12px;')
                td
                  input#checkusers(data-perfil=''+usuario.perfil,onclick="get_values_usuarios_seleccionados();",class='check_user',type='checkbox', value='#{usuario.pk}')
                td #{usuario.perfil}
                td #{usuario.nombre}
                td #{usuario.cuenta}

javascript php array checkbox

asked by Karime 29.06.2018 в 00:51

source

1 answer

Help with epplus formulas (Excel) c # Update in firebase Cloud

score 0 · Answer 1

Ok. This is a simple and crude solution: every time you click on a checkbox, if you activated it, you move your entire row to the beginning of the table. If you deactivated it, you move your entire row to the end of the table.

$(document).ready(function() {

  $('.casilla').click(function() {
      var $this=$(this),
          fila=$this.closest('tr'),
          tbody=$this.closest('tbody')
      if($this.is(':checked')) {
         fila.prependTo(tbody);
      } else {
         fila.appendTo(tbody);
      }
  });

});

table td, table th {
border:1px solid;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
  
<table>
	<thead>
	<tr>
    <th>Checkbox</th>
    <th>Nombre</th>
    <th>Raza</th>
    <th>Edad</th>
    <th>Dueño</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Knocky</td>
    <td>Jack Russell</td>
    <td>10</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Flor</td>
    <td>Poodle</td>
    <td>5</td>
    <td>Pedro</td>
  </tr>
    <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Sultán</td>
    <td>Labrador</td>
    <td>3</td>
    <td>Diego</td>
  </tr>
  <tr>
    <td><input class="casilla" type="checkbox"></td>
    <td>Rocky</td>
    <td>Bulldog</td>
    <td>6</td>
    <td>Alicia</td>
  </tr>
</tbody>
</table>

The most elegant way would be to use sort and sort both checked and unchecked by a property (for example alphabetically according to the column "name", but I'll leave that for homework