关于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 ...
随机推荐
- 注解形式读取properties文件中的属性
1.spring.xml中加入(多个properties 用逗号隔开) <context:property-placeholder location="classpath:jdbc. ...
- 学习参考《父与子的编程之旅python【第二版】》高清中文版PDF+高清英文版PDF+源代码
对于初步接触编程语言的朋友,推荐看一看<父与子的编程之旅第2版>,对于完全编程零基础的很友好! 图文并茂,过多的文字堆垒很容易让人产生厌倦情绪,也更容易让人产生放弃的想法.使用了大量插图, ...
- securefx连接linux后文件夹中文乱码问题解决
首先在选项中设置字符编码为UTF-8 然后在全局选项中找到Securefx的配置文件 进入到该目录中,选择“Sessions”: 在“Sessions”中找到链接地址的ini文件,并用文本编辑器打开: ...
- 基于LevelDB的高可用ActiveMQ集群
基于LevelDB的高可用ActiveMQ集群 http://donald-draper.iteye.com/blog/2347913
- 洛谷—— P2663 越越的组队
https://www.luogu.org/problem/show?pid=2663 题目描述 班级要组织一场综合能力竞赛,全班同学(N个,N是偶数)分成两队互相竞争.老师找到了越越并给了越越一张全 ...
- Android数据分批载入-滑动究竟部自己主动载入列表
Android数据分批载入-滑动究竟部自己主动载入列表 2014年5月9日 摘自:<Android高级开发实战-ui.ndk与安全> 本博文介绍怎样进行数据分批载入,在应用开发其中会常常使 ...
- nyoj--218--Dinner(语法)
Dinner 时间限制:100 ms | 内存限制:65535 KB 难度:1 描述 Little A is one member of ACM team. He had just won the ...
- Django关于图片验证码显示笔记
.访问页面 /login/ - 内部需要创建一张图片,并且给用户返回 - 创建一个白板 Session存放验证码 .POST - 根据用户提交的数据与session里面比较 .登录界面 和 验证码 分 ...
- BZOJ 球形空间产生器 解题报告(高斯消元)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1013 1013: [JSOI2008]球形空间产生器sphere 有一个球形空间产生器能 ...
- BZOJ 1927 最小费用流问题
From lydrainbowcat //By SiriusRen #include <queue> #include <cstdio> #include <cstrin ...