How to add and remove data from an array according to the value with splice

Navigation
0

Hello I need help with an application in which I have 5 checkboxes could be more up to 100 but I'm doing the example with only 5.

Well, the thing is that when you choose transport options you are actually clicking on chechboxes that will save the selected value in an array with push , but you also need to deselect that checkbox I took out that same deselected value, I understand that with splice is the correct option for it but when doing it with splice I deleted everything I had saved in the array, but only I need to delete the checkbox deselected according to what I'm choosing.

all this is in order to change the color of divs when the user has chosen the preferred transport options, then when I click on a verify button that the color of the divs change according to the options chosen by the user.

the divs just like the checkboxes are 5 with their corresponding name here I leave you what I am trying any help or tips I would appreciate it. 

$(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>
    
asked by andy gibbs 04.10.2018 в 19:35
source

3 answers

1

I modified your js a bit, change the click to change because I think it's better since they actually change their status and it's better to handle them by change and should only run when a change in their status is detected; I also use the function indexOf and I put the value that has not been checked so that I return its index in the array and then remove it with splice , I hope it works: 

$(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>
    
answered by 04.10.2018 / 21:48
source
1

You just have to change a detail in the splice, Modify this: 

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

For : 

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

What the above code does is look for an element in the array and remove it.

    
answered by 04.10.2018 в 20:01
0

so I am the final code to get what I wanted 

$(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>
    
answered by 04.10.2018 в 22:19
doubt when passing a preg_match parameter Bash to count folders in the current directory excluding others with a given name