《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结
<form>
<input type="radio" name="gender" id="man" value="男" />男
<input type="radio" name="gender" id="woman" value="女" />女
<br />
<input type="checkbox" name="math" id="math"/>数学
<input type="checkbox" name="english" id="english"/>英语
<input type="checkbox" name="chinese" id="chinese"/>语文
<br />
<select id="province">
<option value="beijing">北京</option>
<option value="hubei">湖北省</option>
<option value="hunan">湖南省</option>
<option value="guangdong">广东省</option>
</select>
<input id="btnSubmit" type="submit" value="submit" />
</form>
1. 判断radio是否被选中:
//可以通过判断radio被选中的个数长度是否为0
var len = $('input[name="gender"]:checked').length;
if(len){
console.log('radio没有选择,请选择一个!');
}
//判断某个radio是否被选中
if($('#man:checked').length){
console.log('你选择了男的radio');
}
//或者
if($('#man').is(':checked')){
console.log('你选择了男的radio');
}
2. 设置radio选中:
//javascript方法:
document.getElementById("man").checked = true;
//jQuery的prop方法
$('#man').prop('checked', true);
//取消选中
$('#man').prop('checked', false);
//不建议使用以下方法
$('#man').attr('checked', true);
3. 获取radio被选中的值
$('input[name="gender"]:checked').val();
//或者
$('input[name="gender"][checked]').val();
4. 判断checkbox是否被选中:
//判断某个checkbox是否被选中,跟radio方法一样
if($('#math:checked').length){
console.log('你选择了数学');
}
//或者
if($('input[name="math"]:checked').length){
console.log('你选择了数学');
}
//或者
if($('#math').is(':checked')){
console.log('你选择了数学');
}
//还有一种方法是使用javascript
if(document.getElementById("math").checked == true){
console.log('你选择了数学');
}
//注意:网上流传的如下这种判断方法是不恰当的,与jQuery版本有关
if($('#math').attr('checked') == true)
if($('#math').attr('checked') == undefined)
if($('#math').attr('checked') == 'checked')
5. 设置checkbox选中:
/***跟radio的方法一样***/
//javascript方法:
document.getElementById("math").checked = true;
//jQuery的prop方法
$('#math').prop('checked', true);
//取消选中
$('#math').prop('checked', false);
//不建议使用以下方法
$('#math').attr('checked', true);
6. select的取值、选中
//获取当前选中项的值
$("#province").val();
//获取当前选中项的text
$("#province").find("option:selected").text();
//设置value值为guangdong的项选中
$("#province").val('guangdong');
//设置text为广东的项选中
$(".selector").find("option[text='广东']").attr("selected",true);
《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结的更多相关文章
- 《FLASH PROGRAMMING 那些事》总结
注明来自 http://www.ssdfans.com/?p=5589 以MLC为例: 对FGF(Floating Gate Flash)技术的,MLC programming一般分两步走:先prog ...
- Implementation of Serial Wire JTAG flash programming in ARM Cortex M3 Processors
Implementation of Serial Wire JTAG flash programming in ARM Cortex M3 Processors The goal of the pro ...
- [原创] Keil uVision5 下载程序 add flash programming algorithm选项缺少需要的算法解决办法
MDK开发环境从V4升级到V5后,支持包不再是集成到开发环境当中,而是封装在PACK中,需要自行安装,比较麻烦. 搭建MDK开发环境以及破解的方法,在前面的文章中有详细说明,这里不再赘述,有兴趣的可以 ...
- Turtelizer 2 provide JTAG Flash programming and debugging of ARM based boards via USB
http://www.ethernut.de/en/hardware/turtelizer/ Introducing Turtelizer 2 Overview Turtelizer 2 had be ...
- 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU硬件那些事(2.3)- 串行NOR Flash下载算法(J-Link工具篇)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是J-Link工具下i.MXRT的串行NOR Flash下载算法设计. 在i.MXRT硬件那些事系列之<在串行NOR Flash X ...
- Programming Internal Flash Over the Serial Wire Debug <SWD> Interface -- EFM32
1 Debug Interface Overview 1.1 Serial Wire Debug Serial Wire Debug (SWD) is a two-wire protocol for ...
- Error:Flash Download Failed-"Cortex-M3"
Error:Flash Download Failed-"Cortex-M3"出现一般有两种情况: 1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/H ...
- STM32F4读写内部FLASH【使用库函数】
STM32F4Discovery开发帮使用的STM32F407VGT6芯片,内部FLASH有1M之多.平时写的代码,烧写完之后还有大量的剩余.有效利用这剩余的FLASH能存储不少数据.因此研究了一下S ...
- Flash Download Failed-"Cortex-M3"
rror:Flash Download Failed-"Cortex-M3"出现一般有两种情况: 1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/HW ...
- Stm32_调试出现 Error:Flash Download Failed-"Cortex-M3"
rror:Flash Download Failed-"Cortex-M3"出现一般有两种情况: 1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/HW ...
随机推荐
- (转)Dubbo与Zookeeper、SpringMVC整合和使用
原文地址: https://my.oschina.net/zhengweishan/blog/693163 Dubbo与Zookeeper.SpringMVC整合和使用 osc码云托管地址:http: ...
- CORS基础要点:关于dataType、contentType、withCredentials
事实上,面试时我喜欢问跨域,因为多数开发者都知道它并且常用,而我希望能从面试者的回答中知道他在这个问题的深入程度,进一步看看面试者研究问题的思维方式及钻研精神,然而确实难到了很多人,当然这也不是面试通 ...
- 深入C#编程
1.NET框架 1.1.NET框架结构 VB.NET C# F# lronruby others.... .NET FrameWork(FCL) 公共语言进行时(CLR) 操作系统 .NET框架具有两 ...
- [LeetCode] Linked List Random Node 链表随机节点
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...
- 最全的 JavaScript 知识总结
来源于:http://gcdn.gcpowertools.com.cn/showtopic-28404-1-3.html?utm_source=gold.xitu.io&utm_medium= ...
- [转]HQL中的子查询
原文地址:http://blog.csdn.net/xb12369/article/details/8638683 子查询: 子查询是SQL语句中非常重要的功能特性,它可以在SQL语句中利用另外一 ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- vs中使用git
vs中使用git 一.概念 Git是一个强调速度的分布式版本控制软件和源代码管理系统(SCM,source code management).Git最初是由Linus Torvalds为内核开发而设计 ...
- Apache service named reported the following error(OS 10055)由于系统缓冲区空间不足或队列已满解决办法?
apache启动失败报错: The Apache service named reported the following error:>>> AH00451: no listeni ...
- 搭建自己的网站之一:如何在linux下使用tomcat
1. 要打造自己的网站,首先应该有属于自己的服务器.个人的话可以在阿里云或者腾讯云购买云主机,需要的话再购买一个域名,与自己的公网ip绑定(不然只能由ip地址访问,当然,自己用来练手的话是没什么问题的 ...