select all checkboxes in a razorview table

Question

I want to select all the checkboxes in table on clicking the header checkbox. I don't know how to do that. This is what I have done so far.

    <table class="table" id="myTable">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="selectAll" />
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.SNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Description)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Quantity)
                </th>
                <th></th>
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            @Html.HiddenFor(model => item.PartNumber)
            <tr>
                <td>
                    @Html.CheckBoxFor(modelItem => item.Transfer)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Quantity)
                </td>
                <td>
                    @Html.ActionLink("Edit", "EditDetails", new { id = item.PartNumber }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.PartNumber }, new { onclick = "return confirm('Are sure wants to delete?');" })
                </td>
            </tr>

        }
<script>
    $('#selectAll').click(function (e) {
        $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
    });
</script>

This is what the console is returning :

Uncaught ReferenceError: $ is not defined

How do I get past it? I am new to MVC. Any and all help will be appreciated.

What is not working? What errors are you getting in the browser console? — , Oct 22 '18 at 11:28
Please change your javascript to $('#myTable').find('td input:checkbox').prop('checked', this.prop('checked')); — Ripun, Oct 22 '18 at 11:30
@Ripun no, there's no need for that, OP's code will work as-is - see my comment below with demo link. Although, your version would be a tiny bit more efficient for the JS engine to process, but it's not actually a _problem_ the way it is now. — ADyson, Oct 22 '18 at 11:32
"I don't know how to do that". I think you do. Demo: http://jsfiddle.net/4ofw0rn8/ your code already works, assuming that the Razor CheckBoxFor outputs what you'd expect it to. The only thing that's possibly missing from your functionality is that if the user un-checks an individual checkbox again, logically it should also uncheck the "select all" box at the same time. But that's a separate line of code you need to write. There's nothing actually wrong with what you've written so far. If it's somehow not working for you, you'll need to give us more info, e.g. any console errors etc. — ADyson, Oct 22 '18 at 11:34
@StephenMuecke, there are no errors in console. Neither when the page is rendered, nor when I check the main checkbox. — , Oct 22 '18 at 11:40
As @ADyson - the code you have shown works, so its not working for you then its something you have not shown causing the issue. — , Oct 22 '18 at 11:42
@ADyson, there are no errors in console. And yes, I have yet to implement 'uncheck all', just doing one thing at a time. — , Oct 22 '18 at 11:42
@StephenMuecke, and what would that thing be that I have not shown? The only thing left was console errors. But there aren't any. — , Oct 22 '18 at 11:44
Ok well, what you've shown us does not allow us to reproduce your issue, so it's hard for us to help you any further. Clearly you have missed some important detail, but we can't guess what it is. Perhaps you can take my JSFiddle and modify it until it reproduces your problem, then we can understand the nature of the issue. (Check your page's source code to see what HTML it is actually outputting from the Razor code and use that - JavaScript/jQuery can only operate on the final HTML delivered to the browser, it does not know about C#/Razor code, so try to take that out of the equation). — ADyson, Oct 22 '18 at 11:45
Start by debugging the script - for example, what does `cnsole.log($(this).closest('table').find('td input:checkbox').length);` return? — , Oct 22 '18 at 11:46
Oh I got something. This is what console is returning : `Uncaught ReferenceError: $ is not defined at Details:242600` — , Oct 22 '18 at 11:53
Ok so you _do_ have a console error. If you haven't already worked it out (you can paste the error into google and get 1000s of results about it), it means you haven't included jQuery in your page. — ADyson, Oct 22 '18 at 12:08
You can see [this duplicate question](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) and hundreds of others, for instance. [Here](https://stackoverflow.com/questions/15458523/how-to-insert-jquery-code-uncaught-referenceerror-is-not-defined-in-view-raz) is a more MVC-specific one — ADyson, Oct 22 '18 at 12:10

score 0 · Accepted Answer · answered Oct 22 '18 at 14:06

This error

Uncaught ReferenceError: $ is not defined

means jQuery is not included. First, check you have correctly included in your BundleConfig.cs file like this

    public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // ... more code
        // This is the line that include jQuery
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
        // ... more code

    }
}

You will have to confirm that you have actually a file named jquery-versionnumber.js in your Script folder. versionnumber can be any version you want to work with. Then, verify that somewhere in your views (in your _Layout.cshtml by default) you have included the script, like this

@Scripts.Render("~/bundles/jquery")

Notice the ~/bundles/jquery string is the same in both the cs file and the cshtml view. Rerun and verify in your browser that jQuery file is actually included.

select all checkboxes in a razorview table

1 Answers1