Cómo presionar para montar sólo nuevas casillas de verificación revisadas

Estoy tratando de construir un sistema que reconocerá cuando se revise la nueva casilla, una vez que se revise la casilla, el usuario tendrá que elegir una de las opciones: left, right, all.

Una vez elegido uno de los tres, las casillas de verificación revisadas serán empujadas a su matriz específica. ()all[], right[], left[])

El problema:

Supongamos que comprobé la casilla número 1, y haga clic all.

Debugging:
all["1"]

entonces comprobé la casilla número 3, y haga clic left.

Voy a conseguir la siguiente depuración:

Debugging:
all["1"]
left["1", "3"]

Resultado deseado:

all["1"]
left["3"]

Quiero left[] array para conseguir sólo el nuevo checkbox check, pero sin deshacerse de las casillas de verificación.

Codepen

$(document).ready(function () {

    //Adding each checked checkbox to array
    let checked = [], all = [], left = [], right = [];
    $box = $('.ppom-check-input');
    $box.on('change', function() {
        checked = $box.filter(':checked').map((i,c) => c.value).get();
        $('#choose').addClass('active');
        console.log( checked );
    });
    
    //Push the value to array
    $('.all,.left,.right').on('click', function() {
        if( $(this).is('.all') ) {
            all = [...new Set( all.concat(checked) )];
            $('#choose').removeClass('active');
        } else if( $(this).is('.left') ) {
            left = [...new Set( left.concat(checked) )];
            $('#choose').removeClass('active');
        } else if( $(this).is('.right') ){
            right = [...new Set( right.concat(checked) )];
            $('#choose').removeClass('active');
        }
        console.log( 'all',all, 'left', left, 'right', right );
    });
});


1



2



3



4



5

¿Cómo puedo empujar a un array nuevo valores sólo (no todas las casillas de verificación revisadas)?

Pregunta hecha hace 3 años, 4 meses, 27 días - Por apiartisan

3 Respuestas:

  • Una manera de hacer arriba es dar algunos class para las casillas de verificación cuando se comprueba utilizando addClass("selected_new") entonces eliminar el mismo sólo cuando cualquiera de a etiqueta se hace clic entonces sólo las casillas de verificación que se seleccionan recientemente se añadirán en array.

    Código de Demo :

    $(document).ready(function() {

  //Adding each checked checkbox to array
  let checked = [],
    all = [],
    left = [],
    right = [];
  $box = $('.ppom-check-input');
  $box.on('change', function() {
    //if checked then only
    if ($(this).is(":checked")) {
      //added new class
      $(this).addClass("selected_new")
      //or
      //$(this).attr("data-selected", "selected_new")
    }
    //or [data-selected=selected_new]:checked
    checked = $box.filter('.selected_new:checked').map((i, c) => c.value).get();
    $('#choose').addClass('active');

  });
  $('.all,.left,.right').on('click', function() {
    console.clear()
    //remove class once any link is clicked
    $("input[type=checkbox]").removeClass("selected_new")
    //or
    //$("input[type=checkbox]").attr("data-selected", "")
    if ($(this).is('.all')) {
      all = [...new Set(all.concat(checked))];
      $('#choose').removeClass('active');
    } else if ($(this).is('.left')) {
      left = [...new Set(left.concat(checked))];
      $('#choose').removeClass('active');
    } else if ($(this).is('.right')) {
      right = [...new Set(right.concat(checked))];
      $('#choose').removeClass('active');
    }
    console.log('all', all, 'left', left, 'right', right);
  });
});
    
 1

    
 2

    
 3

    
 4

    
 5

    Respondida el Dec 18, 2020 a las 13:31 - por bytebuster

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr que se añadan a los arrays all, left y right sólo las nuevas casillas de verificación revisadas, puedes realizar los siguientes cambios en tu código:

    • Almacena el estado revisado de cada casilla de verificación en un arreglo auxiliar para llevar un registro de cuáles han sido revisadas.
    • Al momento de procesar cuáles checkbox han sido marcadas, verifica si la casilla en cuestión ya ha sido añadida al array auxiliar de casillas revisadas. Si ya ha sido añadida, no la incluyas en el array de casillas a añadir a `all`, `left` o `right`.

    Aquí te muestro cómo podrías modificar tu código:

    javascript
$(document).ready(function () {

    let checked = [], all = [], left = [], right = [];
    let checkedHistory = [];

    $box = $('.ppom-check-input');

    $box.on('change', function() {
        checked = $box.filter(':checked').map((i,c) => c.value).get();
        $('choose').addClass('active');        console.log(checked);
    });

    $('.all,.left,.right').on('click', function() {
        let newChecked = checked.filter((c) => !checkedHistory.includes(c));

        if( $(this).is('.all') ) {
            all = [...new Set( all.concat(newChecked) )];
        } else if( $(this).is('.left') ) {
            left = [...new Set( left.concat(newChecked) )];
        } else if( $(this).is('.right') ){
            right = [...new Set( right.concat(newChecked) )];
        }

        checkedHistory = checkedHistory.concat(newChecked);

        $('choose').removeClass('active');        console.log('all',all, 'left', left, 'right', right);
    });
});

    Con estos cambios, tu código debería añadir correctamente al array correspondiente solo las nuevas casillas de verificación revisadas. ¡Espero que esto te haya ayudado a solucionar el problema!

    Respondida el Dec 19, 2020 a las 13:35 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para resolver este problema, puedes utilizar el operador spread (...) para crear una copia del array checked y luego filtrar este nuevo array para incluir solo los valores que no están ya presentes en el array correspondiente (all, left o right).

    Aquí tienes un código actualizado que implementa esta solución:

    javascript
$('.all,.left,.right').on('click', function() {
  if( $(this).is('.all') ) {
    all = [...new Set( all.concat(checked) )];
    $('choose').removeClass('active');  } else if( $(this).is('.left') ) {
    const newLeft = checked.filter(item => !left.includes(item));
    left = [...new Set( left.concat(newLeft) )];
    $('choose').removeClass('active');  } else if( $(this).is('.right') ){
    const newRight = checked.filter(item => !right.includes(item));
    right = [...new Set( right.concat(newRight) )];
    $('choose').removeClass('active');  }
  console.log( 'all',all, 'left', left, 'right', right );
});

    En este código, hemos añadido un filtro al operador spread para asegurarnos de que solo se agregan al array correspondiente los nuevos valores seleccionados. Específicamente, en los casos de left y right, usamos el método filter para excluir los valores que ya están presentes en esos arrays.

    Respondida el Dec 19, 2020 a las 13:38 - por Gemini

    Votos positivos: 0 | Votos negativos: 0