• 标签的for应匹配id，而不是输入的name
• 不要过度使用数字ID，在某些时候，您的ID很有可能会重复和冲突。相反，删除id和for属性并将输入 Package 到<label>
• 使用jQuery的“change”事件函数回调
• 使用.prop()获取所需的属性值

$("#categoryFilter").on("change", ":checkbox", function() {
  const name = $(this).prop("name");
  const value = $(this).prop("value");
  const checked = $(this).prop("checked");
  console.log(`${name} ${value} ${checked}`);
});

<div class="filter-box" id="categoryFilter">
  <label>
    <input type="checkbox" name="Education" value="3">
    Education
  </label>
  <label>
    <input type="checkbox" name="Employment" value="12">
    Employment
  </label>
  <label>
    <input type="checkbox" name="Goods and Services" value="5">
    Goods and Services
  </label>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

随着IE浏览器的死亡，以及万年青浏览器与最新的ECMAScript产品保持同步，jQuery现在已经不必要了。一个纯JavaScript的方法，没有像jQuery这样的库的开销：

document.querySelector("#categoryFilter").addEventListener("change", (evt) => {
  const el = evt.target.closest("[type=checkbox]");
  if ( !el ) return; // Not a checkbox
  console.log(`${el.name} ${el.value} ${el.checked}`);
});

<div class="filter-box" id="categoryFilter">
  <label>
    <input type="checkbox" name="Education" value="3">
    Education
  </label>
  <label>
    <input type="checkbox" name="Employment" value="12">
    Employment
  </label>
  <label>
    <input type="checkbox" name="Goods and Services" value="5">
    Goods and Services
  </label>
</div>

还要注意，上面的纯JavaScript示例使用了Event delegation，类似于在jQuery中使用$(parent).on("eventName", "dynamicChild", fn)的情况--这甚至适用于动态创建的复选框元素。

您可以在包含<div>元素上为更改事件添加一个事件侦听器。然后，您可以从事件的目标获取value。

document.querySelector('#categoryFilter').addEventListener('change', e => {
  console.log(e.target.checked, e.target.value);
});

<div class="filter-box" id="categoryFilter">             
    <input type="checkbox" id="3" name="Education" value="3">
    <label for="Education">Education</label>
    <input type="checkbox" id="12" name="Employment" value="12">
    <label for="Employment">Employment</label>
    <input type="checkbox" id="5" name="Goods and Services" value="5">
    <label for="Goods and Services">Goods and Services</label>
</div>

使用jQuery：

$('#categoryFilter').on('change', 'input[type="checkbox"]', function () {
  let me = $(this);
  let checkboxName = me.attr('name');
  let checked = me.prop('checked'); // true/false
  console.log(`The checkbox ${checkboxName} was ${checked ? 'checked' : 'unchecked'}.`);
});

我用这个解决方案解决了这个问题，你必须使用forEach和each循环函数，然后在它们上应用onchange事件来获取它们的值和ID

document.querySelectorAll("input[type='checkbox']").forEach(function(element){
        element.addEventListener("change",function(e){
            console.log("TARGET VALUE "+e.target.value)
            console.log("ID: "+element.getAttribute("id"))
        })
    })

    $("input[type='checkbox']").each(function(i,e){
        $(e).change(function(evt){
            console.log("FROM JQUERY VALUE "+$(this).val())
            console.log("FROM JQUERY ID "+$(this).prop('id'))
        })
    })