Question

I have the following in my form

<td><input id="Notifications_0__IssueCreate" name="Notifications[0].IssueCreate" type="checkbox" value="true" /><input name="Notifications[0].IssueCreate" type="hidden" value="false" /></td>
        <td><input id="Notifications_0__AllChanges" name="Notifications[0].AllChanges" type="checkbox" value="true" /><input name="Notifications[0].AllChanges" type="hidden" value="false" /></td>

In the partial view it`s wrriten as :

<%int count = 0; %>
 <%foreach (var item in Model.List)
   {%>
        <tr>
        <td><%=Html.CheckBox("Notifications[" + (count) + "].IssueCreate", item.IssueCreate)%></td>
        <td><%=Html.CheckBox("Notifications[" + (count++) + "].AllChanges", item.AllChanges)%></td>
       </tr>
   <%}
 %>

I want to submit to the controller upon each and every click on any of the checkbox. i.e, if user checks the checkbox, it sends the name of the checkbox and if selected or not to the controller, using ajax post.

How can I do that?

Answer 1

Here’s an example function which registers a click event handler for all checkboxes and posts the name and the value of the clicked element to a controller action through AJAX:

$(function() {
    $('input:checkbox').click(function() {
        var $this = $(this);
        $.post(
            '/home/action', 
            {
                name: $this.attr('name'),
                value: $this.val()
            }, 
            function(data) {
                alert('success');
            }
        );
    });
});