MVC 3 checkbox always returns true, even if unchecked

Question

I have the following code

@foreach (var item in Model.Defaults)
    {
        <tr class="CertainCategory">
            <td>
                @item.Item1
            </td>
            <td>
                @Html.CheckBoxFor(c => c.Use)
                @Html.Hidden("guid", guid.guid.ToString())
            </td>
        </tr>
    }

I'm trying to use AJAX to submit form values to the controller method. My problem is that the value of the checkbox is always sent as true.

$('.CropUsageItem').each(function () {

            var guid = $(this).find("#guid").val();
            var chk = $(this).find("#use").val();
            var data = {
                guid: guid,
                chk: chk
            };

            $.ajax({
                async: false,
                type: "POST",
                url: "DefaultValues/SaveDefault",
                data: data
            });
        });

I have searched StackOverflow with similar results but none of them fully apply to my scenario. How can I send the correct value?

Your saying `var chk = $(this).find("#use").val();` `chk` equals true regardless of the checked status of `#use` ? — asawyer, Oct 06 '11 at 12:15
Yes, even if its unchecked it still posts true to the action method — Heinrich Walkenshaw, Oct 06 '11 at 12:17

Nicholas Murray · Accepted Answer · 2011-10-06T12:30:35.243

54

You can use the following verify if a checkbox is checked.

var chk = $('#use').attr('checked');

or

var chk = $('#use').is(':checked');

edited Oct 06 '11 at 12:30

answered Oct 06 '11 at 12:16

Nicholas Murray

13,305
14
65
84

1

Brilliant! the second option does exactly what i was after. – Heinrich Walkenshaw Oct 06 '11 at 12:25
@Heinrich - Glad to help, you may wish to use fiddler2 to help you debug these sort of issues. – Nicholas Murray Oct 06 '11 at 12:27
first option returns always 'checked', no matter what :) – Michael Brennt Dec 20 '13 at 09:43
second option is the answer for me – akd Mar 21 '14 at 11:16
in my case first option is always undefined, but second works like a charm – Michael Brennt Oct 30 '14 at 12:19

score 7 · Answer 2 · answered Oct 06 '11 at 14:38

7

.val() returns the contents of the value attribute. as it probably is non-null that equates to true.

Also check your casing. JavaScript, css & therefor also jQuery are case sensitive.

answered Oct 06 '11 at 14:38

Simon Halsey

5,459
1
21
32

Thank you this helped me a lot ! – Suraj Singh Feb 16 '16 at 11:55

xr280xr · Answer 3 · 2022-01-27T21:23:07.573

Like Simon said, .val() returns the value attribute of the checkbox, which can be any value you want. But more specifically, it returns the value property of the DOM object, which is initialized by the attribute. MVC seems to set the value to "true" by default, which seems pretty meaningless to me. But in some cases you might want want to set it to an ID or some other meaningful value for the checked option as this thread points out.

Nicholas provided one good way of getting whether the checkbox is checked above. Check and uncheck the checkbox on this jsfiddle for an example of the various approaches and their results:

JQuery Checkbox Checked

Summary of fiddle:

$("#use").val();  //Returns the value. Not related to checked state.
$("#use").attr("checked")  //Returns the checked attribute value. Does not change with checked state.
$("#use").prop("checked")  //Returns boolean checked state.
$("#use")[0].checked       //Returns boolean checked state.
$("#use").is(":checked")   //Returns boolean checked state.

Notice the results of .val and .attr do not change. That is because the val property is not dependent on the checked state, and the actual checked attribute in the markup does not update when the checkbox changes. Only the property on the DOM object behind the scenes, which is what the last three methods access.

See jQuery's API documentation on .prop for more info about this.

score 0 · Answer 4 · answered May 01 '15 at 21:31

0

var chk = $('#use').checked;

worked for me

answered May 01 '15 at 21:31

Michael Day

11
1
4

MVC 3 checkbox always returns true, even if unchecked

4 Answers4