如何使用jQuery获取div内被点击复选框的value或ID？

你可以通过jQuery定位目标容器内的复选框，绑定点击事件来获取点击元素的value或ID，以下是具体实现方式：

1. 获取单个点击复选框的value/ID #

直接给#categoryFilter下的复选框绑定点击事件，通过$(this)获取当前操作的复选框元素：

// 定位目标复选框并绑定点击事件
$('#categoryFilter input[type="checkbox"]').on('click', function() {
    // 获取当前复选框的value
    const checkboxValue = $(this).val();
    // 获取当前复选框的ID
    const checkboxId = $(this).attr('id');

    // 根据选中状态处理逻辑
    if ($(this).is(':checked')) {
        console.log('选中的value:', checkboxValue);
        console.log('选中的ID:', checkboxId);
        // 此处可将值拼接到API URL，示例：
        // const apiUrl = `https://your-api-domain.com?category=${checkboxValue}`;
    } else {
        console.log('取消选中的value:', checkboxValue);
        // 若需处理取消选中的情况（如从URL参数移除），可在此编写逻辑
    }
});

2. 处理多选场景（获取所有选中值） #

如果需要同时获取所有选中的复选框值，拼接成适合API调用的参数格式，可参考以下代码：

$('#categoryFilter input[type="checkbox"]').on('click', function() {
    // 提取所有选中复选框的value，转为数组
    const selectedValues = $('#categoryFilter input[type="checkbox"]:checked').map(function() {
        return $(this).val();
    }).get();

    // 拼接为逗号分隔的参数字符串
    const categoryParams = selectedValues.join(',');
    // 构造API请求URL
    const apiUrl = `https://your-api-domain.com?categories=${categoryParams}`;

    console.log('当前选中的所有value:', selectedValues);
    console.log('API请求URL:', apiUrl);
});

注意事项 #

• 你的HTML代码中存在标签关联错误：label的for属性应对应复选框的id，而非name。比如当前<label for="Education">对应复选框的id是3，点击标签无法选中复选框，建议修正为：

<input type="checkbox" id="3" name="Education" value="3">
<label for="3">Education</label>

• 使用#categoryFilter input[type="checkbox"]定位元素，可避免影响页面中其他无关的复选框。

内容的提问来源于stack exchange，提问作者jfc