简单却实用的的例子:Jquery获取 radio 选中后的文字

今天在 QQ 群里有朋友问到 jQuery 怎么获取选中 radio 后的文本,可见要熟练的使用 jQuery 应该很好的掌握 jQuery 选择器,下边就让我们简单看看这个问题。

首先,他给出的 HTML 示例如下:

<input type="radio" id="male" name="sex" value="1" />男  <input type="radio" id="female" name="sex" value="2" />女 
在这里直接给出 jQuery 获取 radio 选中后的文本的方法,如下:

$("input[name='sex']:checked")[0].nextSibling.nodeValue 
方法将 jQuery 对象转换为 DOM 对象后,再使用原生的 javascript 方法获取文本。在我回复朋友前,他通过在 radio 后添加 span 标记来解决这个问题:

 <input type="radio" id="male" name="sex" value="1" /><span>男</span> 
接来下获取时使用 next() 选择器,如下:

 $("input[name='sex']:checked").next("span").text() 
问题看似到这里就结束了,其实不然,这并不是好的用户体验。好的做法应该为 radio 添加 for 标记,这样在点击 radio 文本"男"或"女"的时候也能选中 radio,这比让用户点击一个小圆圈容易多了。所以最好的 HTML 标记应该如下:

 <input type="radio" id="male" name="sex" value="1" />  <label for="male">男</label>  <input type="radio" id="female" name="sex" value="2" />  <label for="female">女</label> 
最后获取 radio 选中后的文本我相信你已经会了,如下:

  $("input[name='sex']:checked").next("label").text() 
这样使用 jQuery 成功获取了 radio 选中后的文本,这里主要是指最后一个方法。本篇内容虽然简单,但着重说明了一个道理——细节决定成败!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel的宏与VBA入门——代码调试

直接介绍重点&#xff1a; 常用的操作是导航栏的逐句与断点&#xff1a; 添加断点&#xff1a;调试->切换断点 单步运行&#xff1a;调试->逐句 查看变量的窗口&#xff1a;视图->本地窗口 转载于:https://www.cnblogs.com/jiangbei/p/9561352.html

php访问服务器文件路径,PHP与服务器文件系统的简单交互

1、php.ini中关于文件上传的设置指令2、文件上传过程(1)上传文件提交表单html代码&#xff1a;Adminstration - upoload new filesUpload new filesUpload a file(2)php处理上传文件代码①在php脚本中&#xff0c;需要处理的数据保存在超级变量数组$_FILES中&#xff0c;开启re…

泽西岛客户:测试外部呼叫

吉姆和我在上周一直在做一些工作&#xff0c;其中涉及调用neo4j的HA状态URI来检查实例是否是主/从属&#xff0c;并且我们一直在使用jersey-client 。 该代码大致如下所示&#xff1a; class Neo4jInstance {private Client httpClient;private URI hostname;public Neo4jInst…

django F和Q 关键字使用

F 的使用&#xff1a; 想给表里每个价格加上一百就要用上F&#xff0c;直接加是不行的。 转载于:https://www.cnblogs.com/wuheng-123/p/9561422.html

php酷狗音乐json,用php来搜索酷狗音乐

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼返回结果要使用$datajson_decode($json,true);转换为php array变量搜索歌曲&#xff1a;http://mobilecdn.kugou.com/api/v3/search/song?formatjson&keyword想象之中&page1&pagesize30返回实例&#xff1a;Array([st…

了解OutOfMemoryError

每当您发现自己盯着一个带有OutOfMemoryError的堆栈跟踪时&#xff0c;它应该都非常清晰。 该程序不再有肘部空间&#xff0c;并且由于缺少它而濒临死亡。 从10,000英尺或高管椅子上可能已经包含太多信息。 但是&#xff0c;那些必须构建或维护应用程序并弄清为什么会产生特定错…

jQuery之合成事件

jQuery提供一些方法将两种效果合并到一起&#xff0c;比如&#xff1a;mouseover、mouseout。 下面是一些案例&#xff1a; hover(over,out)一个模仿悬停事件&#xff08;鼠标移动到一个对象上面及移出这个对象&#xff09;的方法。这是一个自定义的方法&#xff0c;它为频繁使…

基础命令_1

避免误删除数据1.尽量把文件移动到 /tmp目录2.参数最小化 -f -rf3.-f或-fr放在命令最后#########################################################################################################################find 命令 <find(选项)(参数)> find命令用来在…

php pdo使用事务,PHP内PDO事务使用步骤详解

这次给大家带来PHP内PDO事务使用步骤详解&#xff0c;PHP内PDO事务使用的注意事项有哪些&#xff0c;下面就是实战案例&#xff0c;一起来看一下。概要&#xff1a;将多条sql操作(增删改)作为一个操作单元&#xff0c;要么都成功&#xff0c;要么都失败。单条数据不用事务处理被…

[转帖]真TM长的:SQL Server 2008存储结构——GAM和SGAM、PFS结构、IAM结构、DCMBCM

谈到GAM和SGAM&#xff0c;我们不得不从数据库的页和区说起。 https://blog.csdn.net/snowfoxmonitor/article/details/49991015 一个数据库由用户定义的空间构成&#xff0c;这些空间用来永久存储用户对象&#xff0c;例如数据库管理信息、表和索引。这些空间被分配在一个或多…

六大Java功能

我花了无数小时来对不同的应用程序进行故障排除。 通过经验&#xff0c;我可以得出关于大多数开发人员应该远离的几个Java SE功能/ API的结论。 当我提到大多数开发人员时&#xff0c;我会想到常规的Java EE开发人员&#xff0c;而不是库设计人员/基础结构工程师。 全面披露&a…

解决socket 粘包的三种方法

在socket编程中&#xff0c;当服务器连续向客户机发送两条指令时&#xff0c;就容易发生粘包 解决方法 1.sleep&#xff08;&#xff09;通过睡眠来隔断两条语句 2、设置一条回执语句&#xff0c;当对方接受完信息后返回一个值 3根本解决&#xff1a; 通过在客户端程序中来确定…

用Jquery实现选项卡功能

jQuery实现选项卡功能。首先将界面搭建好。有导航头tab_menu&#xff0c;还有内容tab_box。要实现的效果就是&#xff0c;点击后&#xff0c;将相应的内容显示出来&#xff0c;其他内容隐藏掉。同时为了展现选中状态&#xff0c;为选中的项添加背景&#xff0c;以示区别。 这一…

帝国模板php代码,让帝国cms搜索页模板支持php代码

1.在/e/search/result/index.php头上加入require(../../class/functions.php);2.在/e/search/result/index.php 120行左右//替换公共模板变量$listtemp$tempr[temptext];这行代码之前加上$tempr[temptext]DtNewsBq(list.$tempr[tempid],$tempr[temptext],0);完整代码如下&#…

【刷题】BZOJ 4176 Lucas的数论

Description 去年的Lucas非常喜欢数论题&#xff0c;但是一年以后的Lucas却不那么喜欢了。 在整理以前的试题时&#xff0c;发现了这样一道题目“求Sigma(f(i)),其中1<i<N”&#xff0c;其中 表示i的约数个数。他现在长大了&#xff0c;题目也变难了。 求如下表达式的值&…

寻找缺少的堆栈跟踪

我们最近在博客中发表的一篇评论带回了有关特定体验的一些回忆。 我希望我没有经历过的那种经历。 在我们创建Plumbr之前很长时间&#xff0c;我正在调试一个应用程序&#xff0c;该应用程序每次在蓝月亮时都会给我一个例外。 详细程度令人震惊&#xff1a; java.lang.NullPoi…

HTML5--新增拖放事件(7)

前言&#xff1a; 这节课主要学习HTML5中新增的拖放事件(drag/drop)。 拖放事件 1.启用&#xff1a;HTML5中&#xff0c;如果想拖拽元素&#xff0c;给元素添加draggable true的属性&#xff0c;图像和a标签默认是可以进行拖拽的。 2.拖拽事件&#xff1a; 1.应用于被拖拽元素…

Django 用 uploadify 实现图片批量上传

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本&#xff0c;上传button只能使用图片&#xff0c;不能很方便的修改样式。本文针对的是uploadify 3.0.0版本。uploadify可以结合Django自身的ImageField&…

php判断记录,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程

PHP判断数据库中的记录是否存在的方法&#xff0c;php数据库本文实例讲述了PHP判断数据库中的记录是否存在的方法。分享给大家供大家参考。具体实现代码如下&#xff1a;复制代码 代码如下:$sql"select * from checklist where game_id$gid and task$task and status$stat…

Java DB中的Java存储过程

1 Java存储过程 这篇文章是关于Java DB中的Java存储过程的。 Java DB是基于Java编程语言和SQL的关系数据库管理系统。 这是Apache软件基金会的开源Derby项目的Oracle版本。 Java SE 7 SDK中包含Java DB。 在数据库内调用的Java代码是一个存储过程&#xff08;或多个过程&…