JSFiddle - React, Tailwind, and code Playground

by joycse06

HTML

<div id="tools">

<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 />

</div>

JavaScript

$("#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(parseInt($(this).val()))
            }

        });
        removePanes(checkedArray);
    }
        });           

        var newSeries = [{yAxis:1},{yAxis:4},{yAxis:3},{yAxis:2}];


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