复选框数据过滤器和if else语句

Question

您好Stackoverflow我已经基于平台数组制作了一个图表数据过滤器，并且我为3个复选框的每个排列设置了if / else语句，并且当我取消选中所有复选框之后按facebook复选框时，它不再起作用了。用我的if / else逻辑，如果是这样，为什么我真的很想知道这种情况的替代方案，我认为主要问题是选中的facebook情况与选中的facebook和twitter情况一起触发了，完整的代码在脚本末尾标记许多感谢

    var Cdata = []
    var Tdata = [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 30]
    var Fdata = [300, 400, 300, 200, 100, 200, 300, 500, 1000, 900, 1200, 1400]
    var Wdata = [200, 300, 100, 100, 50, 200, 300, 500, 100, 900, 900, 100]

    var dt = [];


    function change1() {
      for (var i = 0; i < Tdata.length; i++) {
        Cdata.push(Tdata[i] + Wdata[i] + Fdata[i]);
      }
    }
    change1()

    $("input[type=checkbox]").change(function () {    
      if (!$('#Checkbox1').is(':checked')) {
           change2()
      }
      if (!$('#Checkbox2').is(':checked')) {
          change3()
      }
      if (!$('#Checkbox3').is(':checked')) { 
          change4()
      }
      if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked')) {
         change5()
      }
      if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked')) {
          change5()
      }
      if (!$('#Checkbox2').is(':checked') && !$('#Checkbox3').is(':checked')) {
          change6()
      }
      if (!$('#Checkbox1').is(':checked') && !$('#Checkbox3').is(':checked')) {
          change7()
      }
     if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked') && !$('#Checkbox3').is(':checked')) {
          change0()
      }
     if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked') && $('#Checkbox3').is(':checked')) {
         change()
      }});

    function change2() {
      var dt = Fdata
      change(dt)
    }

    function change3() {
      var dt = Tdata
      change(dt)

    }
    function change4() {
      var dt = Wdata
      change(dt)
    }

    function change5() {
      var dt = []

      for (var i = 0; i < Tdata.length; i++) {
        dt.push(Tdata[i] + Fdata[i]);
      }    
      change(dt)
    }
    function change6() {
var dt = []
      for (var i = 0; i < Tdata.length; i++) {
        dt.push(Tdata[i] + Wdata[i]);
      }    
      change(dt);
    }

    function change7() {
var dt = []
      for (var i = 0; i < Tdata.length; i++) {
        dt.push(Fdata[i] + Wdata[i]);
      }    
      change(dt);
    } 

    change0 = () => {
      var dt = []
      for (var i = 0; i < Tdata.length; i++) {
        dt.push(Tdata[i] + Fdata[i] + Wdata[i]);
      }    
      change(dt)
    }    

    change = (dt) => {    
      var Cdata = []
      var Cdata2 = []

      for (var i = 0; i < Tdata.length; i++) {
        Cdata.push(Tdata[i] + Wdata[i] + Fdata[i] - dt[i]);

      }
      for (var i = 0; i < Tdata.length; i++) {
        Cdata2.push(Tdata[i] + Wdata[i] + Fdata[i] - dt[i]);
      }


      var cardStatsMiniLineColor = "#fff",
        cardStatsMiniDotColor = "#fff";

      ctx = document.getElementById('lineChartExample').getContext("2d");

      gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
      gradientStroke.addColorStop(0, '#80b6f4');
      gradientStroke.addColorStop(1, chartColor);

      gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
      gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
      gradientFill.addColorStop(1, "rgba(249, 99, 59, 0.40)");

      myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
            label: "Active Users",
            borderColor: "#f96332",
            pointBorderColor: "#FFF",
            pointBackgroundColor: "#f96332",
            pointBorderWidth: 2,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 1,
            pointRadius: 4,
            fill: true,
            backgroundColor: gradientFill,
            borderWidth: 2,
            data: Cdata
          }]
        },
        options: gradientChartOptionsConfiguration
      });

      ctx = document.getElementById('lineChartExampleWithNumbersAndGrid').getContext("2d");

      gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
      gradientStroke.addColorStop(0, '#18ce0f');
      gradientStroke.addColorStop(1, chartColor);

      gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
      gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
      gradientFill.addColorStop(1, hexToRGB('#18ce0f', 0.4));

      myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
          labels: ["12pm,", "3pm", "6pm", "9pm", "12am", "3am", "6am", "9am"],
          datasets: [{
            label: " Stats",
            borderColor: "#18ce0f",
            pointBorderColor: "#FFF",
            pointBackgroundColor: "#18ce0f",
            pointBorderWidth: 2,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 1,
            pointRadius: 4,
            fill: true,
            backgroundColor: gradientFill,
            borderWidth: 2,
            data: Cdata2
          }]
        },
        options: gradientChartOptionsConfigurationWithNumbersAndGrid
      });
    }   
  </script>