html中radio、checkbox选中状态研究(静下心来看,静下心来总结)
html中radio、checkbox选中状态研究(静下心来看,静下心来总结)
一、总结
1、单选框的如果有多个checked 会以最后一个为准
2、js动态添加checked属性:不行:通过 $("[name='sex']:eq(1)").attr("checked",true);或$("[name='sex']:eq(1)").attr("checked","");
3、jquey的prop方法,单选框复选框都适用:选中使用:$("[name='sex']:eq(1)").prop("checked",true);$("[name='subject']:eq(0)").prop("checked",true);
最后我们总结以下3点:
1、对radio 、checkbox 来说说,checked属性可以保证页面初始化被选中,但是通过js或者jquery 控制checked属性并不能保证相应的被选中,同样也不能通过checked属性来判断该元素是否被选中。
2、checked属性并不能影响form表单的值,表单页面真正被选中的元素才是form表单提交的值。
3、通jquery的prop方法可以完美的选中或者取消选中元素,使用prop("checked",true) 选中,prop("checked",false)取消选中,通prop("checked") 返回的false或者true判断是否选中。
二、html中radio、checkbox选中状态研究
我们在web页面开发中经常需要让单选框、复选框进行选中或者不选中的操作,我们知道要让单选框或者复选框默认选中就需要添加checked属性,但是我们在js中使用jquery的attr可以在dom中添加checked属性但是页面却没有选中。所以 今天进行一个彻底的研究说明。
来我们看一个简单的dom结构来进行说明。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form name="from1" id="form1" action="test.do">
<label>性别:</label>
<input type="radio" name="sex" value='male'/><label>男</label>
<input name="sex" checked type="radio" value="female"/><label>女</label>
<input name="sex" checked type="radio" value="gay"/><label>同性恋</label>
<br>
<label>科目:</label>
<input name='subject' type="checkbox" value="Chinese" /><label>语文</label>
<input name='subject' type="checkbox" checked value="Math" /><label>数学</label>
<input name='subject' type="checkbox" checked="checked" value="English"/><label>英语</label>
<input name='subject' type="checkbox" value="Sport"/><label>体育</label>
<input type="submit" /> <input type="reset" />
</form>
</body>
</html>
我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选中,单选框的如果有多个checked 会以最后一个为准。
来看一下我们刚开始初始化的时候。这里说明一下我们使用jquery的serialize方法来查看表单提交的内容,这个是我们最关心的吧。
我们认为添加了checked属性就可以让单选框或者复选框默认选中,那么通过js那也应该是可以的呀,但是事实可能与我们想象中有些不一样。
我们可以通过 $("[name='sex']:eq(1)").attr("checked",false);或$("[name='sex']:eq(1)").removeAttr("checked");将checked属性移除.
可以通过 $("[name='sex']:eq(1)").attr("checked",true);或$("[name='sex']:eq(1)").attr("checked","");
或$("name='sex']:eq(1)").attr("checked","checked");将checked属性添加上去
在单选框radio中,我们多次调用attr给某个radio添加checked属性和移调,此时的checked属性和页面展示的是否选中 并不能相互匹配了。
而且我们还发现checked属性 并不是直接影响 表单的值,而是页面展示的选中才是 表单的值。
我们的checkbox复选框 通attr来控制选中也是同样的问题。
所以那么问题来了,我们并不能通attr来添加checked属性或者移除checked属性来控制单选框或者复选框是否被选中,同样也不能通过checked属性来判断该单选框或者复选框是否被选中。我们可以使用jquery的prop方法来判断当前单选框或者复选框是否被真正的选中。
比如我们看 语文 属性中有checked 但是实际页面上并没有别选中,我们可以使用 $("name='subject']:eq(0)").prop("checked");来判断到底有没有被真正的选中。
那我们想让我们需要的单选框复选框选中用什么方法呢?同样jquey的prop方法,单选框复选框都适用。
选中使用:$("[name='sex']:eq(1)").prop("checked",true);$("[name='subject']:eq(0)").prop("checked",true);
取消选中使用:$("[name='sex']:eq(1)").prop("checked",false);$("[name='subject']:eq(0)").prop("checked",false);
最后我们总结以下3点:
1、对radio 、checkbox 来说说,checked属性可以保证页面初始化被选中,但是通过js或者jquery 控制checked属性并不能保证相应的被选中,同样也不能通过checked属性来判断该元素是否被选中。
2、checked属性并不能影响form表单的值,表单页面真正被选中的元素才是form表单提交的值。
3、通jquery的prop方法可以完美的选中或者取消选中元素,使用prop("checked",true) 选中,prop("checked",false)取消选中,通prop("checked") 返回的false或者true判断是否选中。
html中radio、checkbox选中状态研究(静下心来看,静下心来总结)的更多相关文章
- JQuery获取指定元素中的checkbox选中状态的一些属性
项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的chenckbox,点击删除后,数据库和前端都相应的更新. 如果是静态页面, ...
- html中radio、checkbox选中状态研究
我们在web页面开发中经常需要让单选框.复选框进行选中或者不选中的操作, 我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选 ...
- 获取不到Repeater控件中的CheckBox选中状态
写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- 如何设置Installshield中 feature的选中状态
原文:如何设置Installshield中 feature的选中状态 上一篇: 使用strtuts2的iterator标签循环输出二维数组之前一直有筒子问如何设置Installshield中 feat ...
- 前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态
一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:”checke ...
- WPF ListBoxItem模板中添加CheckBox选中问题
原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...
- jquery--获取input checkbox是否被选中以及渲染checkbox选中状态
jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...
- Datagridview 中的checkbox 选中或勾选状态失效
1.问题描述,先选中第一行,再取消选择,然后点击部门全选,第一行没有打钩,状态是不选中的状态. 2.分析代码 先选中第一行,单元格的单击事件中 改变选中状态为1,第一行取消选择,单元格的单击事件中 改 ...
随机推荐
- Android ijkplayer在windows下编译并导入Android Studio
我是看着里面的步骤来做的,由于我自己对Linux环境和命令不熟悉,导致我对Cygwin的知识为零,在编译ijkplayer的时候走了一点弯路,需要的同学先去看一下上面的这篇文章,我这边是对上面文章做 ...
- pycharm不显示工具栏,自动导入模块,格式化代码快捷键
我们需修改View里面的Toolbar,在前面打上沟,然后就可以显示了 自动导入模块设置:import numpy as np 我们需用鼠标选中numpy,然后在键盘上同时按住Alt+Enter键,通 ...
- 【例题 8-15 UVA - 12174】Shuffle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举第一段的范围[0..i] (0<=i<s) 然后看看[i+1..i+s-1],[i+s,i+s+s-1]..这些区间 ...
- Swift视频教程,Swift千人学iOS开发编程语言
此时大家站在同一起跑线.Swift语言将将是下一个风靡程序猿界的编程语言,是否能抢占先机,近在咫尺. 本期推荐Swift编程语言视频教程,内容包含:开发环境基本使用.数据类型和常量.数据自己主动检查和 ...
- Hadoop作业性能指标及參数调优实例 (二)Hadoop作业性能调优7个建议
作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...
- Office Open XML导出大数据
Office Open XML导出大量数据到 Excel .NET使用Office Open XML导出大量数据到 Excel我相信很多人在做项目的都碰到过Excel数据导出的需求,我从最开始使用最原 ...
- @JSONField 注解说明
转自:https://blog.csdn.net/suyimin2010/article/details/80617538 导入@JSONField 注解: import com.alibaba.fa ...
- 建堆是 O(n) 的时间复杂度证明。
建堆的复杂度先考虑满二叉树,和计算完全二叉树的建堆复杂度一样. 对满二叉树而言,第 \(i\) 层(根为第 \(0\) 层)有 \(2^i\) 个节点. 由于建堆过程自底向上,以交换作为主要操作,因此 ...
- Mysql数据库的瓶颈处理一点建议
Mysql数据库的瓶颈处理一点建议 我们在使用Mysql数据库是常见的两个瓶颈是CPU和I/O的瓶颈,CPU在饱和的时候一般发生在数据装入内存或从磁盘上读取数据时候.磁盘I/O瓶颈的出 ...
- golang beego cache
package main import ( "fmt" "github.com/astaxie/beego/cache" "time" ) ...