jq修改checkbox状态不生效

问题：使用attr来控制checkbox的选中状态，但是第一次点击出现选中样式，之后点击可以看到checked的属性增加成功但是并没有选
中状态。

    <p>
        <span>爱好：</span>
        <input type="checkbox" id="dushu" checked /> 读书
        <input type="checkbox" id="yujia" /> 瑜伽
        <input type="checkbox" id="pengren" /> 烹饪
    </p>
    <button id="checkAll">选中全部</button>
    <button id="clearAll">取消全部</button>
    <script>
        // 问题代码
        // $('#checkAll').click(function (){
        //     $('input').attr('checked', true)
        // })
        // $('#clearAll').click(function (){
        //     $('input').attr('checked', false)
        // })

        // 修改后
        $('#checkAll').click(function (){
            $('input').prop('checked', true)    //生效
        })
        $('#clearAll').click(function (){
            $('input').prop('checked', false)   //生效
        })
    </script>