关于checkbox的一些jquery操作
表单在前端开发中是经常会遇到的,其中自然也少不了checkbox复选框,对于复选框的操作无外乎有以下三种:全选,全不选,反选。下面零度逍遥就给大家分析分析。
一、checkbox全选
大家都知道选择checkbox的方式是给它加上属性checked:'checked',所以用jquery的方式就可以写成这样:
$('input[type=button]').click(function(){
$('input[type=checkbox]').attr('checked','checked');
})
这样点击按钮就是一个全选的操作,但其实不知道大家知道不,checkbox的这样添加属性并不是w3c所推荐的,翻看她官网的推荐,checked的属性值是一个布尔值,所以上述设置checkbox的属性checked应该为true,代码如下:.
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',true);
})
二、checkbox全不选
同全选,全不选刚好相反,可以这样写:
$('input[type=button]').click(function(){
$('input[type=checkbox]').removeattr('checked');
})
同理,最好还是写成这样:
$('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',false); })
三、checkbox反选
反选的逻辑就是把选中状态的变成非选中状态,把非选中状态的变成选中状态,通过上面我们可以知道checked的值是个布尔值,这样我们就能拿过来进行判断,所以代码可以写成:
$('input[type=button]').click(function(){
$('input[type=checkbox]').attr('checked',!$(this).attr('checked'));
})
这样就可以达成目的,不过这里要提到的一点是,在1.10.x的jquery中可能会无法实现上述功能,这时你需要加载个其他版本的jquery,这应该是jquery的一个小bug,具体的各位可以去测试一下。
关于checkbox的一些jquery操作的更多相关文章
- 一些关于 checkbox的前台 jquery 操作 记录
$(function() { //页面载入函数 var partList = jQuery.parseJSON( '${KeyWordsList}'); $.each(partList,functio ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- jQuery 操作 input 之 checkbox
jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jquery的radio和checkbox的标签的操作集合
jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...
- jQuery操作radio、checkbox、select 集合
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
随机推荐
- Ubuntu 16.04 Chrome浏览器安装flash player插件
1:官网下载插件 flash palyer lash_player_npapi_linux_debug.x86_64.tar.gz 2:解压 提取 libpepflashplayer.so 3:手动 ...
- centeros 7开机自动挂载磁盘
场景: 使用mount命令将新发现的磁盘/dev/sdb挂载给/liu后,但是重启后又看不到磁盘? 问题导致原因: 虽然我们可以使用mount命令去挂载磁盘,但是此操作只对服务器运行期间有效,也就是临 ...
- java 对象 拆箱装箱 编译和反编译的验证
创建对象 package 创建对象的个数; public class main { public static void main(String[] agrs){ Check c1=new Check ...
- 做一个可复用的 echarts-vue 组件(延迟动画加载)
在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...
- 紫书 习题 8-21 UVa 1621 (问题分析方法)
知道是构造法但是想了挺久没有什么思路. 然后去找博客竟然只有一篇!!https://blog.csdn.net/no_name233/article/details/51909300 然后博客里面又说 ...
- 转:强制Visual Studio以管理员身份运行
Windows 8的一个既安全又蛋疼之处是UAC的行为被改变了.以往在Windows 7中,只要关闭了UAC,自己的帐号又是本机管理员组的,任何程序都会以管理员身份启动.然而,在Windows 8上, ...
- [Angular + TsLint] Disable directive selector tslint error
@Directive({ // tslint:disable-next-line:directive-selector selector: '[scrollable]' })
- LightOJ - 1038 Race to 1 Again 递推+期望
题目大意:给出一个数,要求你按一定的规则将这个数变成1 规则例如以下,如果该数为D,要求你在[1,D]之间选出D的因子.用D除上这个因子,然后继续按该规则运算.直到该数变成1 问变成1的期望步数是多少 ...
- 主程的晋升攻略(4):TCP、消息分包和协议设计
在<主程的晋升攻略(3):IP.DNS和CDN>中,一次网络请求经过DNS解析知道了目的IP,如今就要发出网络包,这里我们说一说TCP的相关话题. TCP是一种流式协议 讲网络编程的教科书 ...
- BZOJ4259: 残缺的字符串 & BZOJ4503: 两个串
[传送门:BZOJ4259&BZOJ4503] 简要题意: 给出两个字符串,第一个串长度为m,第二个串长度为n,字符串中如果有*字符,则代表当前位置可以匹配任何字符 求出第一个字符串在第二个字 ...