為何給CheckBox設置了checked屬性還是沒有勾選，行內樣式都顯示了checked

正常情況下我們設置給CheckBox一個checked屬性后一般都會選中

然而我今天在做案例的時候卻遇到了類似下面這樣一種情況，如下圖

可以看到已經給他設置了checkbox但是第一次加載的時候卻沒有顯示勾選

看下代碼：

當時的業務需求是每次點擊時候要記錄當前的狀態以查看是否需要拿取數據

第一次加載時需取到數據

    document.body.innerHTML = `<input type="checkbox" checked />`
    let input = document.querySelector('input');
    input.onclick = function(){
        input.checked = input.checked? false:true;
    }
   input.onclick();
  

當時在創造元素的時候就給其設置了checked屬性，設置第一次默認全都勾選的狀態

由於第一次加載需要獲取數據，當時就認為默認是沒勾選的，所以調用了一次點擊事件，

而且查看行內樣式也是有checked樣式，所以就會造成這種似乎設置了checked但是卻沒有選中的情況。

結語

並不是行內設置了checked樣式就一定會勾選，還要看是否用給checked設置了真假屬性。