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()??

Answer 1

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.