当前位置: 首页 > 编程日记 > 正文

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判断是否选中。

相关文章:

新年新气象,100 行 Python 代码制作动态鞭炮

作者 | FrigidWinter来源 | CSDN博客放鞭炮贺新春&#xff0c;在我国有两千多年历史。关于鞭炮的起源&#xff0c;有个有趣的传说。西方山中有焉&#xff0c;长尺余&#xff0c;一足&#xff0c;性不畏人。犯之令人寒热&#xff0c;名曰年惊惮&#xff0c;后人遂象其形&#xf…

php 反射类简介

反射是操纵面向对象范型中元模型的API&#xff0c;其功能十分强大&#xff0c;可帮助我们构建复 杂&#xff0c;可扩展的应用。其用途如&#xff1a;自动加载插件&#xff0c;自动生成文档&#xff0c;甚至可用来扩充 PHP 语言。php 反射api 由若干类组成&#xff0c;可帮助我们…

shell时间

Shell 调用系统时间变量 Linux常用命令获取今天时期&#xff1a;date %Y%m%d 或 date %F 或 $(date %y%m%d) 获取昨天时期&#xff1a;date -d yesterday %Y%m%d 获取前天日期&#xff1a;date -d -2day %Y%m%d 依次类推比如获取10天前的日期&#xff1a;date -d -10day %Y%m%d…

杨老师课堂_Java核心技术下之控制台模拟记事本案例...

预览效果图&#xff1a; 背景介绍&#xff1a; 编写一个模拟记事本的程序通过在控制台输入指令&#xff0c;实现在本地新建文件打开文件和修改文件等功能。 要求在程序中&#xff1a; 用户输入指令1代表“新建文件”&#xff0c;此时可以从控制台获取用户输入的文件内容&#x…

PHP的URL处理

完整URL地址&#xff1a; http://username:passwordhostname/path?argvalue#auchor 协议&#xff1a;http:// 用户名和密码&#xff1a; username:password 以&#xff1a;将两者分隔 主机名&#xff1a;hostname 和/为分隔符 路径&#xff1a; /path 以/开头、包含/符号 参…

UnitOfWork以及其在ABP中的应用

Unit Of Work&#xff08;UoW&#xff09;模式在企业应用架构中被广泛使用&#xff0c;它能够将Domain Model中对象状态的变化收集起来&#xff0c;并在适当的时候在同一数据库连接和事务处理上下文中一次性将对象的变更提交到数据中。 从字面上我们可以我们可以把UnitOfWork叫…

分享3个好用到爆的 Python 模块,点赞收藏

作者 | 俊欣来源 | 关于数据分析与可视化今天给大家介绍3个特别好用的Python模块&#xff0c;知道的人可能不多&#xff0c;但是特别的好用。PsutilPendulumPyfigletPsutilPython当中的Psutil模块是个跨平台库&#xff0c;它能够轻松获取系统运行的进程和系统利用率&#xff0c…

使用XHProf分析PHP性能瓶颈(二)

上一篇文章里&#xff0c;我们介绍了如何基于xhprof扩展来分析PHP性能&#xff0c;并记录到日志里&#xff0c;最后使用xhprof扩展自带的UI在web里展示出来。本篇文章将讲述2个知识点&#xff1a; 使用xhgui代替xhprof的默认UI界面&#xff0c;更便于分析使用tideways扩展替换x…

PHP自动加载类—__autoload()和spl_autoload_register()

test.php <?phpfunction __autoload($class_name) {require_once $class_name . .php;}$obj new j();?> 当前目录下有j.php <?phpclass j{function __construct() {echo "成功加载";} }?> 正常输出&#xff1a;成功加载修改test.php代码<?phpf…

二分 + 模拟 - Carries

Carries Problems Link Mean: 给你n个数&#xff0c;让你计算这n个数两两组合相加的和进位的次数. analyse: 脑洞题. 首先要知道&#xff1a;对于两个数的第k位相加会进位的条件是&#xff1a;a%(10^k)b%(10^k)>10^k. 想到这一点后就简单了&#xff0c;枚举每一位&#…

机器学习的出现,是否意味着“古典科学”的过时?

作者&#xff1a;Laura Spinney译者&#xff1a;刘媛媛原文&#xff1a;Are we witnessing the dawn of post-theory science?让我们回忆一下&#xff0c;Isaac Newton 被一个苹果砸中头部&#xff0c;然后是怎么提出牛顿第二定律——万有引力的&#xff1f;大概过程是这样的&…

MySQL5.6.16二进制源码安装详解及一键安装实现

一、系统环境 1.1操作系统 [rootlocalhost ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [rootlocalhost ~]# uname -rm 10.0-693.el7.x86_64 x86_64 [rootlocalhost ~]# 1.2 安装前环境监测 1.2.1.SELinux和系统防火墙关闭 检查selinux [rootlocalho…

基于 OpenCV 的表格文本内容提取

作者 | 小白来源 | 小白学视觉小伙伴们可能会觉得从图像中提取文本是一件很麻烦的事情&#xff0c;尤其是需要提取大量文本时。PyTesseract是一种光学字符识别&#xff08;OCR&#xff09;&#xff0c;该库提了供文本图像。PyTesseract确实有一定的效果&#xff0c;用PyTessera…

Redis以及Redis的php扩展安装无错版

安装Redis 下载最新的 官网&#xff1a;http://redis.io/ 或者 http://code.google.com/p/redis/downloads/list第一步&#xff1a;下载安装编译 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz#tar zxvf redis-2.4.4.tar.gz#cd redis-2.4.4#make #make instal…

Android UI SurfaceView的使用-绘制组合图型,并使其移动

绘制容器类&#xff1a; //图形绘制容器 public class Contanier {private List<Contanier> list;private float x0,y0;public Contanier(){listnew ArrayList<Contanier>();}public void draw(Canvas canvas){canvas.save();canvas.translate(getX(), getY());chi…

新型混合共识机制及抗量子特性的 Hcash 主链测试链即将上线

由上海交通大学密码与计算机安全实验室&#xff08;LoCCS&#xff09;及上海观源信息科技有限公司负责研发的、具有新型混合共识机制及抗量子特性的 Hcash 主链代码已完成并在 2017 年 12 月18 日之前上传至github&#xff1a; https://github.com/HcashOrg/hcashd https://git…

CentOS 6虚拟机安装

这篇博客已经被合并到这里了&#xff1a; 虚拟机安装CentOS以及SecureCRT设置【完美无错版】 下面不用看了&#xff0c;看上面即可 1.下载虚拟机Oracle VM VirtualBox最新的下载地址&#xff1a; http://download.virtualbox.org/virtualbox/4.1.6/VirtualBox-4.1.6-74713-Win…

开发中新游戏《庞加莱》

三体题材的游戏&#xff0c;表现三体人在三体星上生活和冒险。收集水和物器&#xff0c;躲避火焰与巨日&#xff0c;探索遗迹并与巨型生物战斗。温度会因太阳位置不同而发生变化&#xff0c;进而对环境产生一定影响。 游戏开发中。 ---- 2017-4-27版视频&#xff1a; http://v.…

介绍一个打怪升级练习 Python 的网站,寓教于乐~

作者 | 周萝卜来源 | 萝卜大杂烩这是一个学习 Python 的趣味网站&#xff0c;通过关卡的形式来锻炼 Python 水平。一共有 33 关&#xff0c;每一关都需要利用 Python 知识解题找到答案&#xff0c;然后进入下一关。很考验对 Python 的综合掌握能力&#xff0c;比如有的闯关需要…

hive基本操作与应用

通过hadoop上的hive完成WordCount 启动hadoop ssh localhost cd /usr/local/hadoop ./sbin/start-dfs.sh cd /usr/local/hive/lib service mysql start start-all.sh Hdfs上创建文件夹 hdfs dfs -mkdir test1 hdfs dfs -ls /user/hadoop 上传文件至hdfs hdfs dfs -put ./try.tx…

PHP源代码分析-字符串搜索系列函数实现详解

今天和同事在讨论关键字过虑的算法实现&#xff0c;前几天刚看过布隆过滤算法&#xff0c;于是就想起我们公司内部的查找关键字程序&#xff0c;好奇是怎么实现的。于是查找了一下源代码&#xff0c;原来可以简单地用stripos函数查找&#xff0c; stripos原型如下&#xff1a; …

麻省理工研究:深度图像分类器,居然还会过度解读

作者 | 青苹果来源 | 数据实战派某些情况下&#xff0c;深度学习方法能识别出一些在人类看来毫无意义的图像&#xff0c;而这些图像恰恰也是医疗和自动驾驶决策的潜在隐患所在。换句话说&#xff0c;深度图像分类器可以使用图像的边界&#xff0c;而非对象本身&#xff0c;以超…

Oracle 查询转换之子查询展开

概念:子查询展开&#xff08;Subquery Unnesting&#xff09;是优化器处理带子查询的目标sql的一种优化手段&#xff0c;它是指优化器不再将目标sql中子查询当作一个独立的处理单元来单独执行&#xff0c;而是将该子查询转换为它自身和外部查询之间等价的表连接。这种等价连接转…

Xcode中通过删除原先版本的程序来复位App

可以在Xcode菜单中点击 Product->Clean Build Folder (按住Option键,在windows键盘中是Alt键.) 此时Xcode将会从设备中删除(卸载uninstall)任何该app之前部署的版本. 接下来重启Xcode,再试一下,有时这可以修复非常奇怪(really weird)的问题.

深入理解PHP之OpCode

OpCode是一种PHP脚本编译后的中间语言&#xff0c;就像Java的ByteCode,或者.NET的MSL。 此文主要基于《 Understanding OPcode》和 网络&#xff0c;根据个人的理解和修改&#xff0c;特记录下来 &#xff1a;PHP代码&#xff1a; <?phpecho "Hello World";$a 1…

关于 AIOps 的过去与未来,微软亚洲研究院给我们讲了这些故事

作者 | 贾凯强出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;在过去的15年里&#xff0c;云计算实现了飞速发展&#xff0c;而这种发展也为诸多的前沿技术奠定了基础&#xff0c;AIOps便在此环境中获得了良好的发展契机。在数字化转型的浪潮下&#xff0c;云计算已经…

JS 正则表达式 0.001 ~99.999

^(0|[1-9][0-9]?)(\.[0-9]{0,2}[1-9])?$转载于:https://www.cnblogs.com/wahaha603/p/9050130.html

深入浅出PHP(Exploring PHP)

一直以来&#xff0c;横观国内的PHP现状&#xff0c;很少有专门介绍PHP内部机制的书。呵呵&#xff0c;我会随时记录下研究的心得&#xff0c;有机会的时候&#xff0c;汇总成书。:) 今天这篇&#xff0c;我内心是想打算做为一个导论&#xff1a; PHP是一个被广泛应用的脚本语言…

懒人神器 !一个创意十足的 Python 命令行工具

作者 | 写代码的明哥来源 | Python编程时光当听到某些人说 xx 库非常好用的时候&#xff0c;我们总是忍不住想要去亲自试试。有一些库&#xff0c;之所以好用&#xff0c;是对一些库做了更高级的封闭&#xff0c;你装了这个库&#xff0c;就会附带装了 n 多依赖库&#xff0c;就…

Regular Expression Matching

正则匹配 Regular Expression Matching Implement regular expression matching with support for . and *. . Matches any single character. * Matches zero or more of the preceding element.The matching should cover the entire input string (not partial).The functio…