CODEWITHSUNDEEP
asp.net-mvc-3razorunobtrusive-javascript
Maxim V. Pavlov
Maxim V. Pavlov

Reputation: 10509

Add a client-side checkbox clicked handler to Razor view

The following markup generates an input of type checkbox with an id="IsRecurring" when a Razor view is sent to the browser.

<div class="editor-label">
    @Html.LabelFor(model => model.IsRecurring)
</div>

<div class="editor-field">
    @{
        @Html.EditorFor(model => model.IsRecurring)
    }
</div>

I need to show/hide other markup block, based on the checked state of the checkbox.

Which is the most MVC3 way to do it?

My plan is to go with adding the following script above the div:

<script type="text/javascript">
    $("#IsRecurring").click(function () {
        do show hide;
    });
</script>

Where is the appropriate place in my View markup, to place the script? Is there a better way I can reference IsReccuring checkbox, rather then knowing what Id it's going to have in advance?

Upvotes: 5

Views: 14518

Answers (3)

Bogdan Mates
Bogdan Mates

Reputation: 556

You can also try:

$('#checkboxId').click(function () {
    //add code here
    });

Upvotes: 1

Felix
Felix

Reputation: 852

You could try like this:

@Html.CheckBoxFor(model => model.IsRecurring, new {onchange = "checkedChanged"})

//JS
var checkedChanged = function () {
    alert("checkedChanged");
}

Upvotes: 4

Fernando Mondo
Fernando Mondo

Reputation: 477

how hide/show is a behavior I would use script, adding a class in checkbox: 

@Html.CheckBoxFor(model => model.IsRecurring, new {@class "recurring"})


//event
$(".recurring input:checkbox").click(function () {
                   //hide/show
                });

Upvotes: 3

Related Questions