jQuery Selector For "Html.CheckBoxFor"

Question

Is there a way using asp.net/jquery to toggle a div visibility when using a checkbox like this:

<%: Html.CheckBoxFor(m => m.Type) %>

I know how to do the jQuery part, but I'm not sure how to determine whether or not the box has been clicked or changed. Is there some sort of onChange or onClick I can add to this?

EDIT - Let me change this a bit...HOW can I assign an id to the Html.CheckBoxFor()??

I think the id of the checkbox will be automatically set to the object property it's been created for. So in the example above it would be 'id="Type"'. You could always have a look at the mark-up your code creates to double-check. — ipr101, Aug 31 '11 at 21:21

Darin Dimitrov · Accepted Answer · 2011-08-31T21:19:02.653

21

You could subscribe for the .change() event and .toggle() the visibility of the div based on whether the checkbox has been checked or not:

$(function() {
    $('#mycheckbox').change(function() {
        var isChecked = $(this).is(':checked');
        $('#someDivId').toggle(isChecked);
    });
});

And you can see it in action here.

To identify this checkbox you could either assign it an unique id:

<%: Html.CheckBoxFor(m => m.Type, new { id = "mycheckbox" }) %>

or a class:

<%: Html.CheckBoxFor(m => m.Type, new { @class = "check" }) %>

and then adapt your jQuery selector.

edited Aug 31 '11 at 21:19

answered Aug 31 '11 at 21:09

Darin Dimitrov

1,023,142
271
3,287
2,928

What I meant was how can I assign an ID to the checkbox? I am using the CheckBoxFor in ASP.Net and I am unsure how to set the id. – Cody Aug 31 '11 at 21:17
2

@Doctor Oreo, by default the Html.CheckBoxFor helper assigns an id. It will be inferred from the lambda expression in your view models object hierarchy. So if we are at level 0, it will be `id="Type"`. You could of course customize this by using the proper overload of the CheckBoxFor helper as shown in my updated answer. – Darin Dimitrov Aug 31 '11 at 21:20
For some reason, I have to check the box and uncheck it for the function() to register. – Cody Aug 31 '11 at 21:29
@Doctor Oreo, the change event is (as it name suggests) triggered only when the value of the checkbox changes. – Darin Dimitrov Aug 31 '11 at 22:04

score 0 · Answer 2 · answered Aug 31 '11 at 21:10

0

Yes, there is an onclick/onchange event for most of html element.

Let assume your checkbox has an id="checkbox1", you can do the following

var myCheckBox = document.getElementById("checkbox1");
myCheckBox.addEventListener('change', function(){do something}, false);

answered Aug 31 '11 at 21:10

Infinity

3,695
2
27
35

What I meant was how can I assign an ID to the checkbox? I am using the CheckBoxFor in ASP.Net and I am unsure how to set the id. – Cody Aug 31 '11 at 21:16

score 0 · Answer 3 · edited May 23 '17 at 12:17

See this question: get the generated clientid for a form field, this is my answer:

I use this helper:

public static partial class HtmlExtensions
{
    public static MvcHtmlString ClientIdFor<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper, 
        Expression<Func<TModel, TProperty>> expression)
    {
        return MvcHtmlString.Create(
              htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(
                  ExpressionHelper.GetExpressionText(expression)));
    }
}

Use it just as you would any other helper: @Html.ClientIdFor(model=>model.client.email)

or in the script:

$(function() {
    $('#@Html.ClientIdFor(m=>m.Type)').change(function() {
        // Do stuff
    });
});

jQuery Selector For "Html.CheckBoxFor"

3 Answers3