代码是这样的-
<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>
我需要将所单击的复选框的值或ID作为目标，以便将其添加到API调用的URL字符串中.
如何确定复选框的目标，以便编写返回值的单击事件？
for应与id匹配，而不是输入的nameid和for属性并将您的输入包装到<label>中.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现在已经不是必要的了.没有像jQuery这样的库开销的纯JavaScript方法将是:
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)所做的操作--这甚至适用于动态创建的CheckBox元素.