表单在前端开发中是经常会遇到的,其中自然也少不了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. BZOJ 5254 [Fjwc2018]红绿灯 (线段树)

    题目大意:一个wly从家走到学校要经过n个红绿灯,绿灯持续时间是$g$,红灯是$r$,所有红绿灯同时变红变绿,交通规则和现实中一样,不能抢红灯,两个红绿灯之间道路的长度是$di$,一共$Q$个询问,求 ...

  2. Centos6.6 yum源更新

    1备份: cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d//CentOS-Base.repo.ori 2下载: wget -O /etc/y ...

  3. vue之computed和watch

    计算属性 computed 侦听器or观察者 watch 一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊: computed ...

  4. curl命令查看响应时间

    curl -w "%{time_namelookup}::%{time_connect}::%{time_starttransfer}::%{time_total}::%{speed_dow ...

  5. Mysql学习总结(21)——MySQL数据库常见面试题

    1. 如何使用SELECT语句找到你正在运行的服务器的版本并打印出当前数据库的名称? 答:下面的语句的结果会显示服务器的版本和当前的数据库名称 mysql> SELECT VERSION(), ...

  6. Android笔记---点击事件的四种写法

    Android 点击事件的四种写法: 1. 以内部类的形式实现 OnClickListener 接口.定义点击事件 class MainActivity extents Activity{ // .. ...

  7. 1264: [AHOI2006]基因匹配Match(动态规划神题)

    1264: [AHOI2006]基因匹配Match 题目:传送门 简要题意: 给出两个序列.每个序列都由n种不同的数字组成,保证每个序列种每种数字都会出现5次(位置不一定一样),也就是序列长度为5*n ...

  8. spark 卡在spark context,运行出现spark Exception encountered while connecting to the server : javax.security.sasl.SaslException

    原因: 使用root用户运行spark代码 解决方法:使用非管理员账户运行spark即可 [userone@localhost bin]$ ./add-user.sh What type of use ...

  9. BZOJ3261 最大异或和 解题报告(可持久化Trie树)

    本题链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3261 题目描述 给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类 ...

  10. BZOJ 1391 网络流

    vis[0]没有清零查一年- //By SiriusRen #include <cstdio> #include <cstring> #include <algorith ...