JQuery Sync 2 Checkboxes

Question

I am using the following code to sync 2 input boxes.

$("#input_box_1").bind("keyup paste", function() {
    $("#input_box_2").val($(this).val());
});

The above works great but I need to do the same for a checkbox.

My question is...how do I modify the code for it to work with a checkbox?

Answer 1

You need to modify the checked property according to the value of that property on the first checkbox whenever the first checkbox changes (so we bind to the change event):

$("#checkbox1").change(function() {
    $("#checkbox2").prop("checked", this.checked);
});

Note that you don't need to pass this into jQuery, you can just access the property of the raw DOM element, which is faster.

Answer 2

Try something like:

$("#input_box_1").on("change", function() {
    $("#input_box_2").prop('checked', $(this).prop('checked'));
});