JQuery Set Checkbox checked vs RadioButton checked

It is a common mistake or confusion on how to set value of Checkbox vs. RadioButton to checked using JQuery. Devs often use .attr method to set the value for both checkbox and radiobutton controls. Note: Using .attr on checkbox is deprecated.

However the right way to set checkbox checked is by using .prop method and radiobutton checked is by using .attr method respectively.

CHECKBOX:

$("#checkBoxCtrlId").prop("checked", true);
$("#checkBoxCtrlId").prop("checked", false);

RADIOBUTTON:

$("#radioButtonCtrlId").attr("checked", true);
$("#radioButtonCtrlId").attr("checked", false);

However same attribute will be used to check either checkbox or radiobutton is checked.

$('.checkBoxCtrlId').is(':checked');
$('.radioButtonCtrlId').is(':checked');