为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked

为何给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设置了真假属性。