Leaflet GeoJSON filters not working

Question

I've been struggling to get map filters to work on my Leaflet map. I've got minimal JavaScript or Leaflet knowledge so where I have got to now has been a struggle. I'm essentially trying to do the following

https://jsfiddle.net/chrisjenner/jq1emofz/

I have tried to replicate this but without any joy. I'm sure it's fairly simple but with limited knowledge, I haven't been able to fix it. My version of the above can be found below where I am trying to filter a layer by a Boolean field. Carp and Tench are species and my sample dataset is for lakes. I want to be able to filter by these.

https://jsfiddle.net/chrisjenner/02crteao/64/

Below is my code

<div class="input" id="carp">
      <input type="checkbox" class="carp" name="1" value="1" checked="true">
      <label for="1">Carp</label>
    </div>

    <div class="input" id="tench">
      <input type="checkbox" class="tench" name="1" value="1" checked="true">
      <label for="1">Tench</label>
    </div>

    const lakes = L.geoJSON(lakes_data, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  }
  },
  {filter: (feature) => {
    const isCarpChecked = checkboxStates.carp.includes(feature.properties.carp)
    const isTenchChecked = checkboxStates.tench.includes(feature.properties.tench)
    return isCarpChecked && isTenchChecked //only true if both are true
  }
}).bindPopup(function(layer) {
  return layer.feature.properties.name;
}).addTo(map);

function updateCheckboxStates() {
  checkboxStates = {
    carp: [],
    tench: []
  }

for (let input of document.querySelectorAll('input')) {
    if (input.checked) {
      switch (input.className) {
        case 'carp':
          checkboxStates.carp.push(input.value);
          break
        case 'tench':
          checkboxStates.tench.push(input.value);
          break
      }
    }
  }
}

for (let input of document.querySelectorAll('input')) {
   input.onchange = (e) => {
    lakes.clearLayers()
    updateCheckboxStates()
    lakes.addData(lakes_data)
  }
}

updateCheckboxStates()
lakes.addData(lakes_data)

Answer 1

In such cases the only solution is browser debugger, break points and inspection of variable contents. If you would do this and set break point inside filter function, you would see that isCarpChecked and isTenchChecked are never set to true, since checkbox value is string "1", but feature property is numeric 1.

Simple solution to this is to convert input.value string to numeric value in updateCheckboxStates function:

function updateCheckboxStates() {
  checkboxStates = {
    carp: [],
    tench: []
  }

  for (let input of document.querySelectorAll('input')) {
    if (input.checked) {
      var numValue = parseInt(input.value);
      switch (input.className) {
        case 'carp':
          checkboxStates.carp.push(numValue);
          break;
        case 'tench':
          checkboxStates.tench.push(numValue);
          break;
      }
    }
  }
}

Besides that your GeoJSON layer filter option is not specified correctly, too many curly brackets, and there is no need to specify GeoJSON source, since you'll be filling it later with the results of check boy status:

const lakes = L.geoJSON(null, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  },
  filter: (feature) => {
    const isCarpChecked = checkboxStates.carp.includes(feature.properties.carp)
    const isTenchChecked = checkboxStates.tench.includes(feature.properties.tench)
    return isCarpChecked && isTenchChecked //only true if both are true
  }
}).bindPopup(function(layer) {
  return layer.feature.properties.name;
}).addTo(map);

Here is working JSFiddle: https://jsfiddle.net/TomazicM/L9ctqnbs/.