default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

关于网页上的复选框checkbox的checked和value的问题

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-03 16:45(UTC)

这个问题相信很多像我一样的非专业开发者遇到过,就是感觉checkbox是一个神奇的存在,为什么这么说?就是在开发网页过程中,有时候使用checkbox一切顺利,提交表单的时候用JavaScript检查它的checked或value的状态或取值都一切正常;但是又有些时候,无论在JavaScript中怎么折腾,感觉这个checkbox一点儿不听话,明明已经选中了,checked的状态始终不变,真是头疼。

当然,上网学习过,MDN的标准答案是:

如果一个复选框在其表单被提交时没有被选中,就不会有任何代表其未被选中的状态(例如 value=unchecked)的值被提交给服务器——该值根本就没有被提交给服务器!如果你想在复选框未被选中时提交一个默认值,你可以在表单中加入一个具有相同的 name 和 value 的 <input type="hidden"> 字段,它可以由 JavaScript 生成。

checked:

一个布尔属性,表示该复选框是否被默认选中(当页面加载时)。它不表示这个复选框当前是否被选中:如果复选框的状态被改变,这个内容属性不反映这个变化。此时,只有 HTMLInputElement 的 IDL 属性 checked 会更新。

怎么样?是不是好像弄懂了一点东西,但是好像又不是特别明白的样子。假如一个复选框的状态被改变,checked属性不反映这个变化!这时什么意思?如果不变化,那么为什么有些页面它表现又那么正常呢?

经过认真学习思考,我终于得到了我自己的结论,可以翻译成大白话,是个程序员都能明白:

就是复选框在form表单中提交的时候,它会很正常!!!划重点,在“表单中提交时”,一个字也不能少!!!其实MDN的解释里有说,只是没有太过强调罢了。再翻译一下,先假设有这么个场景:

如果为了方便用户,比如在用户设置某些选项时,希望把复选框当成一个开关来用,选中表示“开”,不选中表示“关”,直接根据复选框状态后台就更新数据库里的状态,而不需要用户有提交表单的动作。假如你此时 没.有. 在页面中制作一个表单,只是 单.独. 一个复选框,然后希望用JavaScript来处理后续,那么你就惨了,你会发现无论你怎么折腾,貌似都不能得到当前复选框的“checked”状态,挠头吧?!

其实,这是对的,因为复选框本来就是这个德行,没有表单的提交动作,checked状态是不会跟着用户的鼠标点击勾选而变化的,你只是在页面上看到了框里多了一个勾或变成了一个空的框框,就只是“看到”而已。

那么,假如想在页面上实现前述功能,想让复选框像个开关一样直接起作用的话怎么做?

答案也很简单,如果不想麻烦而使用表单来实现,就扔掉checkbox,换言之就可以只是把checkbox当一个摆设,只是给用户的眼睛看状态,就好了呀!真正用JavaScript处理的东西可以是和checkbox一点关系都没有的,比如我们可以在JS里设一个变量来记录,或者给页面上某个dom元素添加一个属性来记录我们需要的状态,比如:<div id='switch' status='0'></div>,用户点一下checkbox,我们就把“status”值在“0“和”1“之间做个变化,不要去读checked是true or false,直接读写switch元素的status属性值就好。

好吧,也许我的理解并不完全正确,但是以我目前的三脚猫水平而言,事实好像就是如此。

visibility 1457


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel