Select all CheckBoxes not working inside a webgrid Jquery and ASP.net MVC

I need to select all checkboxes in my table and also I need to select each rowas separately. To achive that I used this post .

This is Jquery Code

@section Scripts{
    <script>
        $(document).ready(function () {

            // 1st replace first column header text with checkbox

            $("#checkableGrid th").each(function () {               
                if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
                    $(this).text('');
                    $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                    $(this).append("<span>Select All</span>");
                }
            });

            //2nd click event for header checkbox for select /deselect all
            $("#cbSelectAll").live("click", function () {
                var ischecked = this.checked;
                $('#checkableGrid').find("input:checkbox").each(function () {
                    this.checked = ischecked;
                });
            });


            //3rd click event for checkbox of each row
            $("input[name='ids']").click(function () {
                var totalRows = $("#checkableGrid td :checkbox").length;
                var checked = $("#checkableGrid td :checkbox:checked").length;

                if (checked == totalRows) {
                    $("#checkableGrid").find("input:checkbox").each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $("#cbSelectAll").removeAttr("checked");
                }
            });

        });
    </script>
}

And I call it like this,

<div>
    @grid.GetHtml(
    tableStyle: "gridtable",
    htmlAttributes: new { id = "checkableGrid" },
    columns: grid.Columns
        (
    //Here I am going to add checkbox column
            grid.Column(
                format: @<text> <input type="checkbox" value="@item.CustomerID" name="ids" /> </text>,
                header: "{checkall}"
            ),
            grid.Column("CustomerID", "Customer ID"),
            grid.Column("CustomerName", "Customer Name"),
            grid.Column("Address", "Address"),
            grid.Column("City", "City"),
            grid.Column("PostalCode", "Postal Code")
        )
    )
</div>

Each row can select separately, but I can't select all the rows at one time. The Select All check box not showing,instead of that its showing as {checkall}

Please someone help me to solve this.Thank you.