問題：使用attr來控制checkbox的選中狀態(tài)，但是第一次點(diǎn)擊出現(xiàn)選中樣式，之后點(diǎn)擊可以看到checked的屬性增加成功但是并沒有選
中狀態(tài)。

    <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>