Question

Hello I’m having an issue with this check box :

<input type="checkbox" id="hideTempSeries" checked="checked" value="0" /> 
     Temperature <br />
<input type="checkbox" id="hideFlowSeries" checked="checked" value="1" /> 
     Flow <br />
<input type="checkbox" id="hidePressSeries" checked="checked" value="2"/> 
     Pressure <br /> 
<input type="checkbox" id="hideCondSeries" checked="checked" value="3" /> 
     Conductivity  <br />

.. and this jQuery function that sends an array of this check box values to a function called
removePanes(checkedArray) ” every time any of the check boxes have changed ”

   $("#tools :checkbox").change(function(){
       if($(this).prop('checked')){// when Checked

       }
       else{// when unChecked
       var checkedArray = [] ; 
        $("#tools :checkbox").each(function(index,value){
           if($(this).prop('checked') == false){checkedArray.push($(this).val())}

        });
        removePanes(checkedArray) ;
       }

removePanes() function

   function removePanes(id){
       var removeUncheckedSeries = $.map(newSeries , function(index,value){
        for(var i=0 ; i < id.length ; i++){  
            if(index.yAxis == id[i])return null;
        }  
       return index ;
       });
       var modified = $.map(removeUncheckedSeries, function(index,value) {
        index.yAxis = 15 ; 
        return index ;
       });
      console.log(modified) ;
    } ; 

this is newSeries[] Object

The removePanes(checkedArray) function then takes this array and removes all the objects equivalent to the unchecked values from : newSeries[] object

Then it sets all the yAxis values equal to 15.

This function is not working.

Because each time the check box changed the function doesn’t reload the newSeries[] object it just modifies it on the last change.

What it does is, the first click works fine and then it set all the yAxis to 15. When I unchecked any other boxes since all the yAxis equal to 15 and the jQuery array send value from 0 to 3 nothing happened.

QUESTION: How can i make the removePanes(checkedArray) reload with the newSeries[] object each time a change on check box trigger?

Answer 1

That is happening because objects are by default copied by reference
in Javascript.

So if you change any property of copied object from anywhere it will affect all others. To copy an object by value only(or clone) you can use jQuery’s $.extend() method like Jonh Resig(Yes he himself) showed here https://stackoverflow.com/a/122704/344304

var newObj = $.extend(true, {}, oldObj); // deep copy

So change your removePanes function like following

function removePanes(id) {
        var seriesCopy = jQuery.extend(true, {}, newSeries);
        var removeUncheckedSeries = $.map(seriesCopy, function(obj, index) {
            return   $.inArray(obj.yAxis,id) == -1 ? obj : null;
        });
        var modified = $.map(removeUncheckedSeries, function(obj, index) {
            obj.yAxis = 15;
            return obj;
        });
        console.log(modified);
    };​

Demo: http://jsfiddle.net/joycse06/w2KS2/