rapid-django/src/rapid/templates/rapid/widgets/multipleDependent.html

{% load rapid_crud %}
<div id="formset_{{ formset.prefix }}">
{{ formset.management_form }}
<style scoped>
    .rapid-singledependent{
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        padding: 1em;
    }
    .deleted{
        text-decoration: line-through;
    }
</style>
<div id="forms-for-{{ formset.prefix }}">
    {% for form in formset %}
        <div class="rapid-singledependent {{ formset.prefix }} form">
            <input type="checkbox" class="includes_{{ formset.prefix }}"
                   name="includes_{{ form.prefix }}" checked="true">
            {{ form.as_p }}
        </div>
    {% endfor %}
</div>
<input type="button" value="Adicionar" id="add-form-in-{{ formset.prefix }}">
<script>
    $("#formset_{{ formset.prefix }}").on("change", "input.includes{{ formset.prefix }}", function(){
        $(this).parent().toggleClass("deleted");
    });
    $("#add-form-in-{{ formset.prefix }}").click(function(){
        var formcount = $("#forms-for-{{ formset.prefix }}").children("div").length;
        $("#id_{{ formset.prefix }}-TOTAL_FORMS").val(formcount + 1);
        var empty = "<div class=\"rapid-singledependent {{ formset.prefix }} form\">\n<input type=\"checkbox\" class=\"includes_{{ formset.prefix }}\" name=\"includes_{{ formset.prefix }}-__prefix__\" checked=\"true\">\n{{ formset.empty_form.as_p|jsstr }}\n<\div>";
        $("#forms-for-{{ formset.prefix }}").append(empty.replace(/__prefix__/g, formcount));
    });
</script>
</div>