CheckBox Property checked= "Checked" is set by JS, but not checked

1. When the checkbox is set by attr (' checked ', ' checked ') , the checkbox is repeatedly clicked, although the checked property is set correctly, The following code: (Code is the Select all function)

$ (' #ckAll '). Click (function () {
if ($ (' #ckAll '). attr (' checked ') = = ' checked ') {
$ (' #ckAll '). Removeattr (' checked ');
}else{
$ (' #ckAll '). attr (' checked ', ' checked ');
}
if ($ (' #ckAll '). attr (' checked ') = = ' checked ') {
$ ('. Tab-list. Ckbox '). each (function (i,n) {
$ (n). attr (' checked ', ' checked ');
});
}else{
$ ('. Tab-list. Ckbox '). each (function (i,n) {
$ (n). Removeattr (' checked ');
});
}
});

2. change to prop (' checked ', true) , when Ckall is selected, all list checkboxes will be selected

$ (' #ckAll '). Click (function () {
            if (' #ckAll '). Prop ( ' checked ') {
                $ ('. tab-list. Ckbox '). Each (function (i,n) {
                    $ (n). Prop (' checked ', true);
                });
            }else{
                 $ ('. tab-list. Ckbox '). each (function (i,n) {
                     $ (n). Prop (' checked ', false);
                });
            }
        });

CheckBox Property Checked= "Checked" is set by JS, but not checked