简单却实用的的例子: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 选中后的文本,这里主要是指最后一个方法。本篇内容虽然简单,但着重说明了一个道理——细节决定成败!
简单却实用的的例子:Jquery获取 radio 选中后的文字相关推荐
- jQuery获取radio选中后的文字
HTML 示例如下: <input type="radio" id="male" name="sex" value="1&q ...
- jquery获取radio选中值及遍历
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- Jquery 获取 radio选中值
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...
- Jquery 获取 radio选中值(转)
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...
- [开发笔记]-jQuery获取radio选中项的值
<title></title><script src="js/jquery-1.7.2.min.js"></script><s ...
- JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id=&qu ...
- java获取radio选中的值_获取radio值
使用jquery获取radio的值 使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来 ...
- 使用jquery获取radio的值
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: ...
- jquery获取radio的值,a标签传值
jquery获取radio的值: var_name = $("input[name='radioname']:checked").val(); a标签传值: <a href= ...
最新文章
- 文本数据分析——主题提取+词向量化
- mysql增量同步kafka_MySQL数据实时增量同步到Kafka - Flume
- php项目从本地apache移到linux的nginx上,遇到的一些访问权限和报错的问题。
- Leet Code OJ 21. Merge Two Sorted Lists [Difficulty: Easy]
- 面试题汇总---深度学习(图像识别,NLP内容)
- 教育部明确!这类人才聘期流出,取消称号和经费!
- renderTo:Ext.getBody()的意思
- MyBatis 实例
- Sublime Text 3 设置
- this.scrollheight获取textarea的高度是0_53小米电子时钟/v1.0 介绍
- 合并查找到的文件,至新的文件中
- Introduce Local Extension
- 手机论文查重软件哪个靠谱?
- JavaWeb教程———监听器
- ios模拟器 安装ipa_用iOS模拟器安装App的方法
- Java中过滤器与拦截器
- 倒计时插件(及自动循环倒计时)代码
- 前端程序员简历制作建议
- Leetcode报错runtime error
- 扫描二维码打开微信小程序,携带参数,含配置和代码详解
热门文章
- linkedhashmap获取第n个元素_机试真题分享——交换链表前后第K个元素
- 青禾BBS数据库查询语句(动网)
- ImageField,FileField上传文件命名问题
- SqliteHelper整理
- 如何在虚拟机上安装wsus服务器,如何在Hyper-V虚拟机上安装WSUS服务器技巧
- python标签使用教程_怎样用Python做标签云
- Linux系统Shutdown命令定时关机详解
- linux shell 字符串操作详解 (长度,读取,替换,截取,连接,对比,删除,位置 )
- Lintcode--5(37)--反转一个三位数
- Mongo数据库搭建