关于defaultChecked和checked

关于defaultChecked和checked，我想知道这两者之间的区别，以及两者都设置的时候会显示谁。这两者之间是如何协同决定是否勾选checkbox框的。

第二个想知道的是：为什么会有像比如value和defaultValue以及checked这种属性的存在？明明比如id这种东西，就是ele.id就能读写，而checked属性确要搞两个defaultChecked和checked，请问为什么要这样设计？

第三个想知道的是。为什么规定checked不能映射同步修改html文档而defaultChecked却可以，这样的设计又是为什么？

第四个想知道的是，如果说ele.checked=‘true’并不是通过作用html文档才生效的话，那么ele.checked到底改变了什么，浏览器不是解析html文档嘛，又是什么原理使得尽管ele.checked并没有修改html文档，却依旧使浏览器解析checked框的时候解析成被选中状态？

慕仔2276916 2019-08-11

源自：JS DOM属性 3-1 认识布尔属性

收起

1回答

好帮手慕嘟嘟回答被采纳获得+3积分 2019-08-12 13:38:44

同学你好，

① defaultChecked 属性可返回 checked 属性的默认值。如果单选框或者多选框的默认状态是选中，则返回 true，否则返回 fasle。defaultChecked 不是被选中的哦。

简单来说：它们两个之间的关系就是 checked 已经是设置成选中状态了，那么defaultChecked就会返回true，反之就会返回false。

举个例子：

效果：

② 单选框和复选框是不是选中只有 checked才可以设置，defaultChecked是用来返回 checked 属性的默认值，这样设计的目的是让我们可以根据defaultChecked得到的返回值在项目中进行条件判断。

③ 简单来说就是给元素设置了.checked,在html结构上并没有出现这个属性。

举个例子：

效果：

④ 在控制台打印 myCheck.checked 结果为true，证明属性已经被添加上了

收起回答

慕仔2276916 提问者 #1

老师，我先提出一点质疑，您说：单选框和复选框是不是选中只有 checked才可以设置，defaultChecked是用来返回 checked 属性的默认值。可是当我input.defaultChecked = true这样设置的时候，选择框会被勾选。在这里我质疑您的说法。然后我想重申一下第三四个问题第三个想知道的是。为什么规定checked不能映射同步修改html文档而defaultChecked却可以，这样的设计又是为什么？第四个想知道的是，如果说ele.checked=‘true’并不是通过作用html文档才生效的话，那么ele.checked到底改变了什么，浏览器不是解析html文档嘛，又是什么原理使得尽管ele.checked并没有修改html文档，却依旧使浏览器解析checked框的时候解析成被选中状态？我觉得您并没有解答我的问题。我问的是过程和原因，您给我展示的是一个显而易见的结果，我问的就是问什么会有这种结果

2019-08-12 21:09:25
好帮手慕嘟嘟回复提问者慕仔2276916 #2

同学你好， w3c标准表明defaultChecked 属性可返回 checked 属性的默认值。该属性在 checkbox 默认被选定时返回 true，否则返回 false。同学的这种说法input.defaultChecked = true虽然可以实现效果，但是是不规范的。另外： ele.checked=‘true’这种写法是不正确的，应该修改为ele.checked=true。这种写法相当于给ele添加了一个checked属性，浏览器解析的时候，通过解析到了这个属性因此就会给复选框或者单选按钮添加上相应的选中或者不选中的状态了哦~

2019-08-13 12:05:46
好帮手慕嘟嘟回复提问者慕仔2276916 #3

同学你好， ① 设计defaultChecked和 checked这两种方法的原因是为了考虑到IE的情况，IE中，在使用checkbox或radio时，你会发现有时不能通过input.checked = true或input.setAttribute('checked', true)的方法使checkbox或radio被预选中。解决这个问题的方法就是利用checkbox或radio的defaultChecked的属性，将defaultChecked属性置为true即可,具体实现是 input.setAttribute('defaultChecked', true)或 input.defaultChecked= true，这样就能实现checkbox和radio在IE中初始状态下被选中了。 ② 使用ele.checked时，HTML代码是不会发生变化的,但是ele的属性会发生变化来反映这个操作的结果，所以浏览器在解析的时候，就可以根据这个属性的值来判断是否被选中了。希望可以帮到你~

2019-08-13 17:41:34