把复选框变成单选框(prop,attr的区别)
如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求.
下面是用jquery的简单实现
$(function(){
$("input[type='checkbox']").click(function() {
var flag = $(this).prop("checked"); //先记录下点击后应该的状态
$("input[type='checkbox']").prop("checked", false);
$(this).prop("checked", flag);
});
});
这里有两个技巧:
1.每次点击事件中都把所有复选框都设置为false,这样可以保证单选.
2.在复选框置为false之前,记录下当前复选框点击后应该处于的状态,在复选框置为false之后,恢复该状态.这样可以保证复选框点击的正确.
这里有个jQuery的问题,在涉及到获取标签的属性是false或者true时,如checkbox的checked属性,如果jquery版本是1.6以上,就用prop,这样取得的属性值一定是true或false,如果用attr可能false会变成undefined,其他情况就还是用attr.
把复选框变成单选框(prop,attr的区别)的更多相关文章
- 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]
val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框
视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
- 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)
复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...
- 通过jquery将多选框变单选框
多选框的name值为checkboxlist是复选框选中后更换其他复选框状态. function queryListByParam(e){ $("input[name='checkboxli ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
随机推荐
- paip.提升用户体验---论文本编辑器的色彩方案
paip.提升用户体验---论文本编辑器的色彩方案 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.ne ...
- server宕机监控、检測、报警程序(139绑定手机短信报警)monitor_down.sh
宕机监控报警程序 一. 需求来源 宕机对运维人员来说,最痛苦了.怎样检測一台server是否还在正常执行,假设该server宕机,怎样在第一时间监測到并通知一线运维人员进行维护,最大化降低损失. ...
- 自学xml的几个例子
xml是一种被用来传输和存储数据的语言,下面给出一些学习xml过程一些简单的例子.具体xml语法请转:http://www.w3school.com.cn/xml/xml_intro.asp 例子1: ...
- SQLServer .mdf和.ldf文件
.mdf:是数据库数据文件,存放一个数据库的数据信息. .ldf:是数据库日志文件,即日常对数据库的操作的记录如(增.删.改)的文件.
- C# 颜色有3种表示方式: 6位16进制、RGB、 颜色关键字
最常用的是6位16进制的代码表示法.如bgcolor=#ff0000;其中#只是表示使用6位16进制的颜色代码声明颜色.代码的头两位即ff表示三原色中的红色,范围当然是16进制的00-ff,中间两位即 ...
- Java I/O流操作(二)---缓冲流[转]
转自:http://blog.csdn.net/johnny901114/article/details/8710403 一.BufferWriter类 IO的缓冲区的存在就是为了提高效率,把要操作的 ...
- 升级python的sqlite库版本
今天了解了一下用python获取chrome cookie信息,在研究的过程中,发现打开数据库失败,后来调查了一下发现是由于sqlite3库太老的缘故,起码需要3.8以上,然后看了一下python 2 ...
- IO库 8.3
题目:什么情况下,下面的while循环会终止? while(cin >> i) /* ... */ 解答:当读取发生错误时上述while循环会终止.比如i是整形,却输入非整形的数:输入文件 ...
- call和apply方法的理解
第一种:直接先来个粟子吧... ; } var child = {}; console.log(child); //Object() 对象 Parent.call(child); console. ...
- python进阶4--pywin32
python 在windows下系统编程 1.环境配置:Python是没有自带访问windows系统API的库的,需要下载.库的名称叫pywin32,可以从网上直接下载. 以下链接地址可以下载: ht ...