表单在前端开发中是经常会遇到的,其中自然也少不了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. ActiveMQ客户端配置使用

    一.通过JNDI来使用ActiveMQ 1.jndi配置JMS对象 java.naming.factory.initial = org.apache.activemq.jndi.ActiveMQIni ...

  2. PHP设计模式(三)抽象工厂模式(Abstract Factory)

    一.什么是抽象工厂模式 抽象工厂模式的用意为:给客户端提供一个接口,可以创建多个产品族中的产品对象 ,而且使用抽象工厂模式还要满足以下条件: 系统中有多个产品族,而系统一次只可能消费其中一族产品. 同 ...

  3. Testing for SSL renegotiation

    https://blog.ivanristic.com/2009/12/testing-for-ssl-renegotiation.html

  4. SVN版本号管理工具使用中常见的代码提交冲突问题的解决方法

    相信刚開始学习使用SVN的小伙伴在项目合作开发的过程中一定常常遇到一些影响到自己编写的代码的苦恼.我这里列举了几种常见的问题以及问题的解决方法: 1.误删除和误操作的问题 问题1:有A和B两个人一块合 ...

  5. [Perl系列—] 2. Perl 中的引用使用方法

    Perl 中的引用,为什么要使用引用? 对于熟悉C语言的开发人员来说, 指针这个概念一定不陌生. Perl 的引用就是指针,能够指向变量.数组.哈希表甚至子程序. Perl5中的两种Perl引用类型为 ...

  6. flatMap作用

    总结:1. map会将每一条输入映射为一个新对象.{苹果,梨子}.map(去皮) = {去皮苹果,去皮梨子} 其中: “去皮”函数的类型为:A => B 2.flatMap包含两个操作:会将每一 ...

  7. 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...

  8. php生成无限栏目树

    栏目数组:$arr=Array( Array('cid' => 2,'cname' => '新闻','pid' => 0),    Array('cid' => 4,'cnam ...

  9. OnClientClick知识+一个上传的例子

    文件名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp ...

  10. linux中的swap

    1. 也许你会经常遇到一个经典的swap大小设置问题(比如狗血的面试题). 很多人多会说内存的2倍.. 但是个人认为一般而言 swap 不要设置太大,最好不要超过4G. 2. 进程申请内存不足时,发现 ...