How to add checkbox to table data in MVC View?

I want to add a checkbox to my table data that is being fetched from a database from SQL Server. When I select that particular row, I want to be able to delete it from the database. There is already a functionality to delete one single row by entering it in search box. But this time I want to add the checkbox functionality to delete more than one row to make things nicer.

This is what my MVC View looks like.

 @model IEnumerable<MovingApplication.Models.Class1>

@{
    Layout = null;
    ViewBag.message = "hello world";
}

<div class="jumbotron" style="background:#E74C3C !important" >
<h2 style="text-align:center">Table Data</h2></div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

<!----------------------------Table 1 Defined--------------------------------->
<div id="table2">
    <table id="tableA" border="1" align="center"
           class="table tableA table-bordered table-hover 
           table-condensed table-layout: fixed text-center">
        <tr><td><b>Table 1</b></td></tr>
         @{foreach (var item in ViewBag.userdetails)
                {<tr><td width="10%">@item.name</td></tr>}
             }
    </table>
</div>
<div id="table3">
</div>

<!--------------Autocomplete Text Sent to MoveData Method---------------------->

<script type="text/javascript">
    function abc() {
        $.ajax({
            url: "/Home/MoveData",
            type: "get",
            dataType: "html",
            data: { a: $("#name").val() },
            success: function (data) {
             $("#table3").html(data);
            }

        });

    }
</script>

<!-----------------Code to show contents of Table 2------------------------->


<script type="text/javascript">
    function def()
    {
        $("#btn").hide();      
        $.ajax
            ({
            url: "/Home/ShowData",
            type: "get",
            dataType: "html",
            data: { a: $("#name").val() },
            success: function (data) {
                $("#table3").html(data);
             }
            });
    }
    </script>


<!----------------Code to load autocomplete list--------------------------->



<script type="text/javascript">

    $(document).ready(function () {
        $("#name").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/Index",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.name };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

<!----------------------------Input Field--------------------------------->

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div id="button1">
        <hr />
        <div >
            <div class="text-center" >
                <p><b>Enter Any Data</b></p>
                <div class="col-lg-4 col-lg-offset-4">
                    @Html.Editor("name", new { htmlAttributes = new { @class = "form-control text-mywidth" } })
                </div>
            </div>

            <div class="text-center col-lg-4 col-lg-offset-4"><br />
                <input type="button" style="grid-row-align:start" value="Move/Add" onclick="abc()" class="btn btn-success" />
                <input type="button" style="align-self:auto" value="Show Table 2" id="btn" onclick="def()" class="btn btn-info" />

            </div>
        </div>
    </div>
    <br />

    /*-----------Buttons defined to Add/Move/Show data------------------------*/
}