Django动态生成复选框后，如何获取选中的复选框？

你遇到的undefined问题，核心原因是**this的指向不对**——当你用$('.nodos_check_ruta').is(':checked')做判断时，这里的this并不是指向当前选中的复选框元素，而是指向全局的window对象，所以自然拿不到name属性值。

下面分两种场景给你解决方案：

一、获取单个选中的复选框（点击时触发） #

如果需要在用户点击复选框时立刻获取当前选中项的信息，给每个复选框绑定点击事件，此时this会正确指向被点击的元素：

$('.nodos_check_ruta').on('click', function() {
    if ($(this).is(':checked')) {
        var nodeName = $(this).attr("name");
        alert(nodeName);
    }
});

二、批量获取所有选中的复选框（比如提交表单时） #

如果需要一次性收集所有选中的项并保存到列表，可以通过:checked选择器筛选出所有已选中的复选框，再遍历收集它们的name（或value）：

// 假设给表单绑定提交事件
$('form').on('submit', function(e) {
    e.preventDefault(); // 先阻止默认表单提交，处理数据
    var selectedNodes = [];
    
    // 遍历所有选中的复选框，收集name值
    $('.nodos_check_ruta:checked').each(function() {
        selectedNodes.push($(this).attr("name"));
        // 如果需要收集value值，就用$(this).val()
        // selectedNodes.push($(this).val());
    });
    
    console.log('所有选中的节点：', selectedNodes);
    // 这里可以把selectedNodes通过AJAX发给后端处理
    // 比如：
    // $.post('/your-api-url/', {selected_nodes: selectedNodes}, function(res) {
    //     // 处理后端响应
    // });
});

额外优化：利用Django表单特性简化后端获取 #

其实你可以调整前端复选框的name属性，让后端直接通过Django的请求对象拿到选中值，不需要额外JS处理：

前端模板修改： #

<form action="{% url 'your-submit-url' %}" method="post"> 
    {% csrf_token %} <!-- Django表单必须加，防止CSRF攻击 -->
    {% for node in Last_val_nodes %} 
        <!-- 把name统一设为nodes[]，value设为node.0 -->
        <input type="checkbox" name="nodes[]" value="{{node.0}}" class="nodos_check_ruta"> {{node.0}}<br> 
    {% endfor %}
    <button type="submit">提交选中项</button>
</form>

后端views.py处理： #

from django.shortcuts import render

def your_view(request):
    if request.method == 'POST':
        # 直接用getlist拿到所有选中的value值
        selected_nodes = request.POST.getlist('nodes[]')
        # 这里可以对selected_nodes做保存等操作
        print('选中的节点：', selected_nodes)
    # 其他逻辑...
    return render(request, 'your-template.html', {'Last_val_nodes': Last_val_nodes})

这样无论是前端JS处理还是后端直接获取，都能完美解决你的问题啦～

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