表单在前端开发中是经常会遇到的,其中自然也少不了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操作的更多相关文章

  1. 一些关于 checkbox的前台 jquery 操作 记录

    $(function() { //页面载入函数 var partList = jQuery.parseJSON( '${KeyWordsList}'); $.each(partList,functio ...

  2. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  3. 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 ...

  4. jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  5. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  6. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  7. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  8. jquery的radio和checkbox的标签的操作集合

    jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...

  9. jQuery操作radio、checkbox、select 集合

    1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...

随机推荐

  1. luogu P1375 小猫(卡特兰数)

    题意 (n<=200000) 题解 把DP转移方程写出来,这不是卡特兰数吗?然后就解决了. 做完这题我发现 DP真是一个好东西. (公式连乘所以中间要加mod要不爆longlong了) #inc ...

  2. yii框架原生代码

    http://www.cnblogs.com/duanxz/p/3480254.htm

  3. Java基础学习总结(4)——对象转型

    一.对象转型介绍 对象转型分为两种:一种叫向上转型(父类对象的引用或者叫基类对象的引用指向子类对象,这就是向上转型),另一种叫向下转型.转型的意思是:如把float类型转成int类型,把double类 ...

  4. SPOJ 962 Intergalactic Map

    Intergalactic Map Time Limit: 6000ms Memory Limit: 262144KB This problem will be judged on SPOJ. Ori ...

  5. 洛谷 P1275 魔板

    P1275 魔板 题目描述 有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状 ...

  6. python json及mysql——读取json文件存sql、数据库日期类型转换、终端操纵mysql及python codecs读取大文件问题

    preface: 近期帮师兄处理json文件,须要读到数据库里面,以备其兴许从数据库读取数据.数据是关于yelp站点里面的: https://github.com/Yelp/dataset-examp ...

  7. Android开发学习之事件处理和Button具体解释

    Android的事件处理机制:  1.基于监听器的事件处理 --- 组件绑定特定的事件监听器   --- 重点   2.基于回调的事件处理   --- 主要做法是重写Android组件特定的回调函数, ...

  8. C++ 数字、string 简便互转

    一.数字转为 string 类型 借用 sprintf 函数: char buffer[256]; int counter = 10; sprintf(buffer,"%04i", ...

  9. YII进行数据查询及类库追踪

    一般处理过程: 模型进行数据操作,继承自CActiveRecord (活跃记录) AR数据库向上的封装.AR通过OOP面向对象方式操作数据库.AR须要终于转变为详细的sql语句.通过一个中间类(cri ...

  10. Node.js 博客实例(十)pv统计和留言统计

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={ ...