如何用简洁JS获取Django CheckboxSelectMultiple选中复选框的ID和值

我在Django表单中用以下代码创建了CheckboxSelectMultiple组件：

testrever = forms.MultipleChoiceField(required=False,widget=forms.widgets.CheckboxSelectMultiple())

需求是：复选框触发change事件时，仅在勾选时获取最后选中的复选框的ID和值（取消勾选不处理）。之前用重复代码实现了功能，但希望用更优雅的方式精简代码。

原重复实现代码 #

$('#id_testrever_0').on("change", function() {
    var testrever =[]
    var a = $("#id_email").val();
    if ($('#id_testrever_0').is(':checked')) {
        testrever = $('#id_testrever_0').val();
        $("input[name=email]").val(a + testrever)
    }
})
$('#id_testrever_1').on("change", function() {
    var testrever =[]
    var a = $("#id_email").val();
    if ($('#id_testrever_1').is(':checked')) {
        testrever = $('#id_testrever_1').val();
        $("input[name=email]").val(a + testrever)
    }
})

精简优化后的代码 #

利用统一选择器绑定事件，无需为每个复选框单独写逻辑：

// 绑定所有name为testrever的复选框的change事件
$("input:checkbox[name=testrever]").on("change", function() {
    // 仅当当前复选框被勾选时处理
    if ($(this).is(':checked')) {
        var currentId = $(this).attr('id');
        var currentValue = $(this).val();
        // 执行原需求的邮箱拼接操作
        var emailVal = $("#id_email").val();
        $("input[name=email]").val(emailVal + currentValue);
        
        // 若需要额外确认最后选中项，可使用以下逻辑（当前触发事件的复选框即为最新选中项，此为备选）
        // var lastChecked = $("input:checkbox[name=testrever]:checked").last();
        // var lastId = lastChecked.attr('id');
        // var lastVal = lastChecked.val();
    }
});

代码说明 #

• 使用input:checkbox[name=testrever]选择器一次性选中所有目标复选框，统一绑定change事件，彻底避免重复代码。
• 事件触发时，通过$(this)直接获取当前操作的复选框，判断是否处于勾选状态，无需重复查找DOM元素，提升性能。
• 直接从$(this)中提取目标ID和值，逻辑清晰简洁。

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