checkbox的value和checked属性详解
⼀、checked属性
roachecked属性代表的是当前checkbox是否被选中,如果选中返回true,未选中返回fal。和value值⽆关。trapeze
<p><input type="checkbox" name="vehicle" checked/> I have a car</p>
知识点:
1. checked只代表页⾯刷新时,checkbox处于选中状态。checked的属性返回true;
此时,点击checkbox使其处于⾮选中状态,html代码没有变化(checked依然源码上)。但checked的属性返回fal;
2. html中出现checked字样,代表刷后新选,和checked=“任意值”⽆关。哪怕checked=“fal”,刷新时,checkbox仍然是选中私立中学和公立中学的区别
状态。可以理解为checked之后的属性值都是没意义的。
结论:
1. html中checked意味着页⾯加载时,让该checkbox元素的checked属性为true,页⾯显⽰选中状态。
wave flag2. 在提交表单时判断表单是否选中的标准是ElementById(“checkbox1”).checked返回true还是fal。和html页⾯
内容⽆关。
⼆、value属性
<p><input type="checkbox" name="vehicle" id="checkbox1" /> I have a car</p>
ElementById("checkbox1").value);
c span>天津儿童教育
value的属性代表checkbox提交给表单的值。
1. value如果没有设置,则默认value的值是“on”。如果设置,⾃然value就是设置的值。
2. value的值和表单是否选中⽆关。 ⽆论表单是否选中,checkbox的值都是⼀样的。
※这个点是包括我在内很多⼈都有误解。
三、表单提交对checkbox处理
请问下⾯这个表单提交后,提交的name和value是什么呢?
<p><input type="checkbox" name="vehicle" id="checkbox1" checked/> I have a car</p>
答案是不确定
北京万国学校解释:
要点1: 当checkbox处于选中状态时,该checkbox的数据才会被提交。否则,数据不提交。wool是什么意思
什么叫做选中状态?
唯⼀准确的答案是ElementById(“checkbox1”).checked返回true;
我已经解释过,html的checked只代表刷新后的状态,不代表提交时的状态。
我如果通过js把该属性设置成fal,有的浏览器看到的还是打对号选中的状态。实际checked属性是fal。
要点2: 表单提交的value是value属性的值。默认是“on”,否则是设置值。⽆论是否勾选都是⼀个值。
总结:
上⾯的表单,如果处于选中状态,提交给rver的name-value是"vehicle=on".
如果是⾮选中状态,提交的是空,也就是不提交该数据。
毫米的英文
四、实际⼯作中遇到的问题:
checkbox未选中状态,表单的数据没有提交到后台。callus
预期checkbox选中提交1,未选中提交0。但发现数据库没有更新,通过以上明⽩了为什么。
解决⽅法:
在表单提交前,扫描所有的checkbox状态,如果checkbox是checked=true。
把value设置为1.。如果checkbox=fal,把value设置为0.
具体代码,⼤家可以百度,有很多⼈遇到类似问题。解决⽅法可以有很多种,重点是理解了chebox的原理是什么。