Django项目中复选框选中值在文本框显示为[object Object]问题求助

嘿，我一眼就瞅出问题出在哪了——和Django模板渲染的{{item.0}}完全没关系，是你JavaScript脚本里的取值逻辑写错啦！

问题到底出在哪？ #

看你脚本里的这行代码：

txt+=$(this).val(txt) + ","

这里的$(this).val(txt)是给当前复选框设置value值（把txt赋值给它），而不是获取它原本的value！jQuery里.val()传参数是设置操作，返回的是jQuery对象本身（也就是你看到的[object Object]），所以你拼接出来的文本框内容自然是一堆对象字符串。

至于表格第一列的{{item.0}}能正常显示，那是因为Django在渲染模板的时候，就已经把SQL查到的接口名称直接输出成HTML文本了，和后面的JS逻辑根本不搭边——模板渲染是在服务器端完成的，JS是在浏览器端运行的，两者时机完全不一样。

修正后的脚本（还顺便优化了逻辑） #

把取值的地方改成不带参数的.val()就可以了，另外我帮你优化了一下字符串拼接的方式，不用再手动去删最后一个逗号：

$(document).ready(function() {
  $('.chkcvalues').click(function() {
    // 用map收集所有选中的value，再用逗号拼接起来
    var selected = $('.chkcvalues:checked').map(function() {
      return $(this).val();
    }).get().join(',');
    
    $('#txtvalues').val(selected);
  });
});

再确认下模板渲染的正确性 #

其实你的Django模板和SQL部分都没问题，最终生成的HTML里复选框的value已经是正确的接口名称了，比如：

<input type="checkbox" value="TenGigabitEthernet1/0/5" class="chkcvalues">

只是之前的JS错误地把设置值当成了获取值，才导致了这个奇怪的问题。

内容的提问来源于stack exchange，提问作者L.Calvin