Jquery在div中显示复选框的值

Question

我有这个脚本可以让我显示复选框（aspx）旁边的值（文本）。复选框更改文本显示在以逗号分隔的 div 中。不知何故，如果选中任何复选框然后再选中，则该值不会从 JobIDs var 中消失。我在这里缺少什么？

 $(document).data('JobNumbers', "");
 $('[id*=projectchk] input').change(function() {
    var JobIDs = "";
    var JobIDs = $(':checked').map(function() {
        return $(this).closest("span").find("label").html();
    }).get().join(', ');
    var JobNumbers = "<label> Reference Job #:</label> " + JobIDs;
    $('#job_numbers').html(JobNumbers);
    if (JobIDs != "") {
        $(document).data('JobNumbers', JobNumbers);
    }
    return false;
 });

因此，如果选择了 3 个复选框，则会显示：

但即使我选择了所有这些，它仍然显示最后一个：

谢谢。

Answer 1

当您选择所有这些时，该语句变为false：

if (JobIDs != "") {
    $(document).data('JobNumbers', JobNumbers);
}

所以你的代码没有被执行。

编辑：如果您不想在未选择任何选项的情况下显示标签，我认为这很有效：

 $(document).data('JobNumbers', "");
 $('[id*=projectchk] input').change(function() {
    var JobIDs = "";
    JobIDs = $(':checked').map(function() {
        return $(this).closest("span").find("label").html();
    }).get().join(', ');
    var JobNumbers = "";
    if (JobIDs != "") {
        JobNumbers = "<label> Reference Job #:</label> " + JobIDs;
    }
    $('#job_numbers').html(JobNumbers);
    $(document).data('JobNumbers', JobNumbers);
    return false;
 });

这里还有一个很好的实践提示：你不需要每次使用变量时都写var，只有在声明它时才需要。我也强烈建议你阅读一下 JavaScript let 和 const =)