Triggering Ajax On Toggling Of Any Of The Checkboxes
I have a set of 5 checkboxes and I wish to trigger AJAX action whenever any of the checkbox changes its state.
- <input type="checkbox" class="app" name="app_one" id="app_one" value="1">
- <input type="checkbox" class="app" name="app_two" id="app_two" value="1">
- ...and so on.
The code I wrote checks if the checks if checkbox one is 'checked' upon click and then triggers ajax.
$("#app_one").click( function() {
if($(this).prop("checked")) {
var appStatusData = $("#io_dashboard").serialize();
//Add User To Site & Update User Meta
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_object.ajax_url + "?action=updateAppSubscription",
data: appStatusData,
success:function (data, textStatus) {
console.log("Success");
},
error:function (jqXHR, textStatus, errorThrown) {
alert("Failure");
},
complete: function(){
alert("AJAX Complete");
}
}); //END AJAX CALL
} else {
alert ("RESUME NOT CHECKED");
//SHOW SOME NOTICE
}
});
But now I'm thinking, with this approach; I will have to write the same ajax function for uncheck using else statement, and then repeat the procedure for every checkbox!
That certainly isn't the right way to do.
Can someone point me in the right direction? What would be the right way to solve this problem?