Django: want to delete an item with checkbox

I have a template that displays the list of items. It has one checkbox to each item. I want to be able to remove an item from a checkbox when a checkbox is ticked. So I would need a button that deletes an item once a checkbox is selected. Here is my template. Apologies for the huge template.

{% extends "base_popup.html" %}


{% block title %}
      {{title}}
{% endblock %}

{% block script %}

                <script type="text/javascript" src="{{MEDIA_URL}}ui/ui.datepicker.min.js"></script>
                <script type="text/javascript">
                        $(function(){
                                $("#id_required_date").datepicker({dateFormat:"dd/mm/yy"});
                                $(":checkbox").css("width","auto");
                        });
                        $(function(){
                                $("#check_all").click(function(){
                                        if(this.checked ==true)
                                                        $("tbody :checkbox").each(function(){
                                                                this.checked=true;
                                                        });
                                                else
                                                        $("tbody :checkbox").each(function(){
                                                                this.checked=false;
                                                        });
                                });
                        });
                </script>
                {% endblock %}
                {% block content %}
                                <div id="location_header">{{title}}</div>
                <div id="form_container">
                <form action="." method="post">
                        <fieldset class="model">

                                <p>
                                        <span style="font-weight:bold;font-size:14px">Contact : {{order.contact}}</span>
                                </p>
                                <p>
                                        <span style="font-weight:bold;font-size:14px">Cost : {{order.cost}}</span>
                                </p>
             {{ form.as_p }}
                    </fieldset>
                    <fieldset class="model">
                            <legend>Items</legend>
                            <table id="items_table">

                                    <thead>
                                            <tr>
                                                    <td><input type="checkbox" id="check_all" checked="checked"></td>
                                                    <td>Tiptop no</td><td>Client no</td><td>Title</td><td>Item type</td>
                                                    <td>Format</td>
                                            </tr>
                                    </thead>
                                    <tbody>
                            {% for item in items %}
                                    <tr>
                                    <td><input type="checkbox" name="item" value="{{item.pk}}" checked="checked"></td>
         <td>{{item.tiptop_id}}</td><td>{{item.alternative_id}}</td><td>{{item.title}}</td>
                                <td>{{item.type}}</td><td>{{item.format}}</td>           

                                </tr>
                        {% endfor %}

                        </tbody>
                        </table>
                        <p>
                                <form method="post" action="help">
                                <table width="60%">
                                        <tr>
                                                <td>
                                                        <select name="contact_id">
                                                        {% for contact in order.contact.client.contact_set.all %}
                                                                <option value="{{contact.pk}}">{{contact}}</option>
         {% endfor %}
                                                    </select>
                                            </td>
                                            <td>
                                                    <select name="status_id">
                                                    {% for status in status_list %}
                                                            <option value="{{status.pk}}">{{status}}</option>
                                                    {% endfor %}
                                                    </select>
                                            </td>
                                            <td><input type="submit" name="save_status" value="set status for selected items"></td>
                                    </tr>
                            </table>
                    </form>
                    </p>
            </fieldset>
    <div id="form_footer">
                    <span style="font-size:10px;font-weight:bold;margin-right:10px">
                    </span>
                    <input type="submit" name="save_item" value="Save" onclick="validate_item(this.form)">
            </div>
    </form>
    </div>
    <input type="button" onclick="window.location.href='{% ur开发者_JS百科l tiptop.views.client_items name.pk %}'" value="add_item">

    {% endblock %}

---

I'm interpreting your question as, essentially, when a checkbox is clicked, you want to remove that row from your table.

You'll need to write a page that takes the ID of the item to be deleted, and returns true or false based on whether it's successful or not. I'd also advise you to not do this when the checkbox is changed. You should add a button that confirms whether the user really wants the row deleted or not, then trigger this function.

I'm also assuming that you are using jQuery 1.3+.

<script type="text/javascript">
$(function ()
{
    if ($( '#items_table' ).length > 0)
    {
        var table = $( '#items_table' );

        table
            .find( 'tbody input[type=checkbox]' )
            .click(function()
            {
                // Get the ID of the item to delete
                var item_id = $(this).val();

                // Post it to the server
                $.post
                (
                    '/path/to/delete/'+item_id,
                    function(data)
                    {
                        // Assuming the page will return true
                        if( data )
                        {
                            // Remove the table row
                            $(this)
                                .closest('tr')
                                .slideUp()
                                .remove()
                            .end();
                        }
                    }
                );
            })
    }
});
</script>