checkbox的value和checked属性详解
一 、checked属性
checked属性代表的是当前checkbox是否被选中,如果选中返回true,未选中返回false。和value值无关。
<p><input type="checkbox" name="vehicle" checked/> I have a car</p>document.getElementById("checkbox1").checked
知识点:
checked只代表页面刷新时,checkbox处于选中状态。checked的属性返回true;
此时,点击checkbox使其处于非选中状态,html代码没有变化(checked依然源码上)。但checked的属性返回false;html中出现checked字样,代表刷后新选,和checked=“任意值”无关。哪怕checked=“false”,刷新时,checkbox仍然是选中状态。可以理解为checked之后的属性值都是没意义的。
结论:
- html中checked意味着页面加载时,让该checkbox元素的checked属性为true,页面显示选中状态。
- 在提交表单时判断表单是否选中的标准是document.getElementById(“checkbox1”).checked返回true还是false。和html页面内容无关。
二 、value属性
<p><input type="checkbox" name="vehicle" id="checkbox1" /> I have a car</p>alert(document.getElementById("checkbox1").value);
value的属性代表checkbox提交给表单的值。
- value如果没有设置,则默认value的值是“on”。如果设置,自然value就是设置的值。
- value的值和表单是否选中无关。 无论表单是否选中,checkbox的值都是一样的。
※这个点是包括我在内很多人都有误解。
三、表单提交对checkbox处理
请问下面这个表单提交后,提交的name和value是什么呢?
<p><input type="checkbox" name="vehicle" id="checkbox1" checked/> I have a car</p>
答案是不确定
解释:
要点1: 当checkbox处于选中状态时,该checkbox的数据才会被提交。否则,数据不提交。
什么叫做选中状态?
唯一准确的答案是document.getElementById(“checkbox1”).checked返回true;
我已经解释过,html的checked只代表刷新后的状态,不代表提交时的状态。
我如果通过js把该属性设置成false,有的浏览器看到的还是打对号选中的状态。实际checked属性是false。
要点2: 表单提交的value是value属性的值。默认是“on”,否则是设置值。无论是否勾选都是一个值。
总结:
上面的表单,如果处于选中状态,提交给server的name-value是"vehicle=on".
如果是非选中状态,提交的是空,也就是不提交该数据。
四、实际工作中遇到的问题:
checkbox未选中状态,表单的数据没有提交到后台。
预期checkbox选中提交1,未选中提交0。但发现数据库没有更新,通过以上明白了为什么。
解决方法:
在表单提交前,扫描所有的checkbox状态,如果checkbox是checked=true。
把value设置为1.。如果checkbox=false,把value设置为0.
具体代码,大家可以百度,有很多人遇到类似问题。解决方法可以有很多种,重点是理解了chebox的原理是什么。
checkbox的value和checked属性详解相关推荐
- checked属性 详解
https://www.cnblogs.com/mark5/p/11023851.html 注意:当元素中有checked属性时,其值无论是什么,都是被选中状态,那怎么才能让其不被选中呢,就是用jqu ...
- layui添加复选框_对layui初始化列表的CheckBox属性详解,初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性 通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
- jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法 各种选择器的 ...
- 【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型 属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- storybook组件属性详解:组件props到strorybook Args
首先我们查看官方文档:ArgsTable 官方的例子么有看到v-model如何处理,数组.对象等复杂属性定义. 这里一个是props的定义,一个是Controls 先看一下官方文档,Controls ...
- python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
- spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
- Meta http-equiv属性详解
Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
最新文章
- 剑指offer:面试题38. 字符串的排列
- 【C语言也能干大事】第五讲 组合框控件,下拉列表
- server+client+http,服务器与客户端的交互
- 致年轻的创业者:人脉没那么重要
- C++11:委托构造函数
- 用c语言编程序输入一个正整数,编写一个程序,输入一个正整数n(假设n7),求1!+2!+3!+4!+……+n!...
- 牛客 - 动物森友会(二分+最大流)
- IBASE的hierarchy结构
- Bootstrap-CSS-代码
- matlab中的高阶导数,如何用matlab求函数的导数与高阶导数 需要技巧
- api下载文件三种方式
- 用海康威视摄像头做图像处理问题
- matlab小波分析
- scipy库的pearsonr(x, y)的使用
- cruisecontrol 持续化集成(运行bat脚本)
- SQL太难学不会?教你如何零基础快速入门
- SOC安全运营中心产品
- SQL Server“对象名无效”报错的解决方法
- 张驰课堂:六西格玛中的Minitab软件,到底有多重要
- html hr线条粗细,html中hr怎么设置粗细