如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求.

下面是用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的区别)的更多相关文章

  1. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  2. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  3. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  4. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  5. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  6. 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)

    复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...

  7. 通过jquery将多选框变单选框

    多选框的name值为checkboxlist是复选框选中后更换其他复选框状态. function queryListByParam(e){ $("input[name='checkboxli ...

  8. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

随机推荐

  1. qt 5.1.1 on CentOS 6.4

    Overview If you are trying to install Qt and Qwt [qwt.sourceforge.net] (Qt Widgets for Technical App ...

  2. python setattr(),getattr()函数

    setattr(object,name,value): 作用:设置object的名称为name(type:string)的属性的属性值为value,属性name可以是已存在属性也可以是新属性. get ...

  3. 【转】Python3.x移除了callable内建函数

    原文地址:http://www.cnblogs.com/elvisxu/archive/2010/10/26/1861958.html 最近学习Python的时候,在Python3下跑<Dive ...

  4. ZOJ 3829 Known Notation (2014牡丹江H称号)

    主题链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=5383 Known Notation Time Limit: 2 S ...

  5. JavaSE思维导图(一)

  6. asp.net mvc中匿名类dynamic

    dynamic info = new { name="aa", sex=“男”, age= }; //返回Model为info在前台中model.name报错,因为匿名类型默认访问 ...

  7. python 调用hive查询实现类似存储过程

    需求:数据仓库中所有表的定义结构保存到新的文件中,保存后类似下面数据,重复的数据只保留7月份即可 ****************ods_log_info*****************lid st ...

  8. MySQL中的insert ignore into, replace into等的一些用法小结(转)

    MySQL中的insert ignore into, replace into等的一些用法总结(转) 在MySQL中进行条件插入数据时,可能会用到以下语句,现小结一下.我们先建一个简单的表来作为测试: ...

  9. Linux流量监控工具使用总结 - iftop

    在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用netstat.nmap等工具.若要查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop. 一.if ...

  10. 从零开始PHP学习 - 第五天

    写这个系列文章主要是为了督促自己  每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...