jquery多选框增加checked属性不显示选中的问题

今年天做项目实现一个有多选按钮的复选框功能，但是当第二次点击全选按钮后发现子选项不显示被选中，上网查阅资料后找到了以下解决方法。
开始代码是这样的

//监听全选按钮点击事件
$('.selAll input').on('click', function () {
    //如果此时全选按钮被选中执行if中的代码
    if ($(this).is(':checked')) {
        $("#ordersend .wrapper input[type='checkbox']").attr("checked", true);
    } else {
        $("#ordersend .wrapper input[type='checkbox']").removeAttr("checked");
    }
})

后来查阅资料才知道：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法

//checked属性是HTML固有属性，使用prop()函数总会返回一个布尔值
$("input[type='checkbox']").eq(0).prop("checked") == false
$("input[type='checkbox']").eq(0).prop("checked") == true

//但是使用attr()函数时如果元素中没有checked属性，则会返回undefined
$("input[type='checkbox']").eq(0).attr("checked") == undefined
$("input[type='checkbox']").eq(0).attr("checked") == true

所以下面的代码才是我们想要的效果

//监听全选按钮点击事件
$('.selAll input').on('click', function () {
    //如果此时全选按钮被选中执行if中的代码
    if ($(this).is(':checked')) {
        $("#ordersend .wrapper input[type='checkbox']").prop("checked", true);
    } else {
        $("#ordersend .wrapper input[type='checkbox']").removeAttr("checked");
    }
})