0

hola nececito ayuda con una aplicaccion en la cual tengo 5 checkboxes podrian ser mas asta 100 pero estoy haciendo el ejemplo solo con 5.

pues bien, la cosa es que al ejelir opciones de transporte en realidad se estan clickeando chechboxes que a la vez se ira guardo el valor seleccionado en un array con push, pero tambien nececito que si se deselecciona ese checkbox me saque espesificamente ese mismo valor deseleccionado, entiendo que con splice es la opcion correpta para ello pero al hacerlo con splice me borra todo lo que habia guardado en el array, pero solo nececito que me borre el checkbox deseleccionado segun lo que vaya eligiendo.

todo esto es con el fin de cambiar el color de unos divs cuando el usuario haya elegido las opciones de transporte preferidas, entonces cuando haga click en un boton verificar quiero que el color de los divs cambie segun las opciones elegidas por el usurio.

los divs al igual que los checkboxes son 5 con su nombre correspondientes aqui les dejo lo que estoy intentando cualquier ayuda o tips se los agradeceria.

$(function(){

var data=[];//

$("ul li input[type=checkbox]").click(function(){

      var valor=$(this).val()

      if($(this).is(":checked")){

        data.push(valor);
         
      }else{

       data.splice($(this).valor);
       

      }

})

 // cambiar color de los divs correspondinte al clikear verificar //  

  $("#Verificar").click(function(){

      console.log(data)
  //aqui cambiar el color de los divs segun los checkboxes
  //elegidos caundo el usuario haga click en verificar
  //aqui leeriamos el array data para dicho objetivo    
  
  })
});
ul{
  position:relative;
 width:100%;
}
ul li{
 position:relative;
 list-style:none;
 padding:5px;
 border-bottom:solid 1px lightgrey;
 width:100%;
}

ul li:focus{
color:red;
background:red;
}

input[type=checkbox]{
    
   position:absolute; 
   display:block;
   right:0;
   width:100%;
 
   cursor:pointer;

}

#transport{

   padding:10px;
   display:flex;
   justify-content:space-between;
}
#transport div{
  background:lightgrey;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="combo" multiple>
<ul>
 <li><input type="checkbox" id="car" value="car" multiple/>car</li>

 <li><input type="checkbox" id="bike" value="bike" multiple />bike</li>

 <li><input type="checkbox" id="truck" value="truck" multiple />truck</li>

 <li><input type="checkbox" id="plane" value="plane" multiple />plane</li>

  <li><input type="checkbox" id="motorBike" value="motorbike" multiple/>motor bike</li>
</ul>
</div>

<button id="Verificar">Verificar</button>


<div id="transport">
    <div id="car-c"  data-transport="car" class="transport">CAR</div>
    <div id="bike-c"  data-transport="bike" class="transport">BIKE</div>
    <div id="truck-c"  data-transport="truck" class="transport"> TRUCK</div>
    <div id="plane-c"  data-transport="plane" class="transport">PLANE</div>
    <div id="motorBike-c"  data-transport="motorBike" class="transport">MOTOR BIKE</div>
</div>

4
  • y como funciona splice? te pregunto porque antes de usar algo deberías aprender como usarlo -> developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…
    – LPZadkiel
    el 4 oct. 2018 a las 17:40
  • se mas o menos como funciona por eso vengo aqui a aclarar dudas gracias
    – andy gibbs
    el 4 oct. 2018 a las 17:41
  • data.splice($(this).valor,1);
    – alanfcm
    el 4 oct. 2018 a las 17:42
  • te dejé un link que explica bastante bien como funciona y con varios ejemplos, no tomes el camino corto para resolver problemas lee las definiciones de los métodos
    – LPZadkiel
    el 4 oct. 2018 a las 17:42

3 respuestas 3

1

Modifiqué un poco tu js, cambie el click por change porque creo que es mejor ya que en realidad ellos cambian de estado y es mejor manejarlos por el change y solo de debe de ejecutar cuando detecte un cambio en su estado; tambien use el la función indexOf y le coloco el valor que no ha sido chequeado para que me retorne su indice en el array y posteriormente removerlo con el splice, espero te sirva:

$(function(){

var data=[];//

$("ul li input[type=checkbox]").change(function(){
      
      var valor = $(this).val();
      
      if($(this).is(":checked")){
        data.push(valor);         
      }else{
        var index = data.indexOf(valor);
        data.splice(index, 1);
      }

})

  $("#Verificar").click(function(){

      console.log(data)
  //aqui cambiar el color de los divs segun los checkboxes
  //elegidos caundo el usuario haga click en verificar
  //aqui leeriamos el array data para dicho objetivo    
  
  })
});
ul{
  position:relative;
 width:100%;
}
ul li{
 position:relative;
 list-style:none;
 padding:5px;
 border-bottom:solid 1px lightgrey;
 width:100%;
}

ul li:focus{
color:red;
background:red;
}

input[type=checkbox]{
    
   position:absolute; 
   display:block;
   right:0;
   width:100%;
 
   cursor:pointer;

}

#transport{

   padding:10px;
   display:flex;
   justify-content:space-between;
}
#transport div{
  background:lightgrey;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="combo" multiple>
<ul>
 <li><input type="checkbox" id="car" value="car" multiple/>car</li>

 <li><input type="checkbox" id="bike" value="bike" multiple />bike</li>

 <li><input type="checkbox" id="truck" value="truck" multiple />truck</li>

 <li><input type="checkbox" id="plane" value="plane" multiple />plane</li>

  <li><input type="checkbox" id="motorBike" value="motorbike" multiple/>motor bike</li>
</ul>
</div>

<button id="Verificar">Verificar</button>


<div id="transport">
    <div id="car-c"  data-transport="car" class="transport">CAR</div>
    <div id="bike-c"  data-transport="bike" class="transport">BIKE</div>
    <div id="truck-c"  data-transport="truck" class="transport"> TRUCK</div>
    <div id="plane-c"  data-transport="plane" class="transport">PLANE</div>
    <div id="motorBike-c"  data-transport="motorBike" class="transport">MOTOR BIKE</div>
</div>

2
  • habia estado practicando y consegui lo mismo que esta respuesta gracias a sus ideas pude hacerlo completa la funcion que andaba buscando en breve les muestro como lo resorvi
    – andy gibbs
    el 4 oct. 2018 a las 20:00
  • Que bueno que pudiste solventar el 4 oct. 2018 a las 20:03
1

Solo debes cambiar en el splice un detallito, Modificar esto:

data.splice($(this).valor);

Por:

var index = data.indexOf(valor);
data.splice(index, 1);

Lo que hace el codigo de arriba es buscar elemento en el arreglo y eliminarlo.

5
0

asi quedo el codigo final para conseguir lo que queria

$(function(){
	




var data=[];//

$("ul li input[type=checkbox]").click(function(){

      var valor=$(this).val()

      if($(this).is(":checked")){

        data.push(valor);
         
      }else{

       var index=data.indexOf(valor)

       data.splice(index,1);
       

      }

})

 // cambiar color de los divs correspondinte al clikear verificar //  

  $("#Verificar").click(function(){
  
    var i=0;

        for(i; i < data.length; i++){

          $("#"+data[i]+"-c").fadeIn().css({"background":"red","border-radius":"50%","width":"25px","height":"25px",})
       console.log(data)
    }
  
  })
});
ul{
  position:relative;
 width:100%;
}
ul li{
 position:relative;
 list-style:none;
 padding:5px;
 border-bottom:solid 1px lightgrey;
 width:100%;
}

ul li:focus{
color:red;
background:red;
}
ul li:hover{
color:red;
background:#F5F5F5;
}

input[type=checkbox]{
    
   position:absolute; 
   display:block;
   right:0;
   width:100%;
   height:30px;
   cursor:pointer;

}

#transport{
   position:relative;
   padding:10px;
   display:flex;
   justify-content:space-between;
}
#transport div{
  background:lightgrey;
  padding:10px;
}
#transport div i{
  display:none;
  padding:5px;
  position:absolute;
  margin-top:-12px;
margin-left:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="combo" multiple>
<ul>
 <li><input type="checkbox" id="car" value="car" multiple/>car</li>

 <li><input type="checkbox" id="bike" value="bike" multiple />bike</li>

 <li><input type="checkbox" id="truck" value="truck" multiple />truck</li>

 <li><input type="checkbox" id="plane" value="plane" multiple />plane</li>

  <li><input type="checkbox" id="motorBike" value="motorBike" multiple/>motor bike</li>
</ul>
</div>

<button id="Verificar">Verificar</button>


<div id="transport">
    <div  data-transport="car" class="transport">
     <i id="car-c"></i>
     

CAR</div>
    <div   data-transport="bike" class="transport">
 <i id="bike-c"></i>
BIKE</div>
    <div   data-transport="truck" class="transport"> 
<i id="truck-c"></i>
TRUCK</div>
    <div   data-transport="plane" class="transport">
<i id="plane-c"></i>
PLANE</div>
    <div   data-transport="motorBike" class="transport">

<i id="motorBike-c"></i>
MOTOR BIKE</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.