表单在前端开发中是经常会遇到的,其中自然也少不了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. mariadb-增删改查怎么用

    MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行,尽量使用范围小的,而不用大的 常用的数据类型 整数:int, (bit比整数还要小 ...

  2. Login.hbm.xml

    <?xml version="1.0" encoding="utf-8"?><!DOCTYPE hibernate-mapping PUBLI ...

  3. 小A点菜 水题 dp 背包

    基本上还是01背包,首先注意必须正好花光钱,所以初始化时除了dp[0]以外其他都要设置成inf,然后因为求方案数,所以基本方程为dp[i] = dp[i-x] + dp[i],再根据inf进行一些特殊 ...

  4. SNMP学习

    http://blog.sina.com.cn/s/blog_4502d59c0101fcy2.html 简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被In ...

  5. [Angular] Configure an Angular App at Compile Time with the Angular CLI

    Compile time configuration options allow you to provide different kind of settings based on the envi ...

  6. POJ 2828 Buy Tickets(线段树&#183;插队)

    题意  n个人排队  每一个人都有个属性值  依次输入n个pos[i]  val[i]  表示第i个人直接插到当前第pos[i]个人后面  他的属性值为val[i]  要求最后依次输出队中各个人的属性 ...

  7. JS学习笔记-数据类型

    最初的JS学习已经过去大半年的时间了,至此感觉对JS的使用与理解并非非常深入,因此在近期的工作之余也開始了新一轮的JS学习. 几天时间过去了,对于一些基础内容的学习还是非常有必要的,就从今天的又一次整 ...

  8. Fragment使用的正确姿势

     网上关于Fragment的使用建议和分析非常多,可是依旧会有非常多人在使用Fragment的时候出现各种奇葩错误 这篇文章我分享一下各种项目中解决Fragment的各种注意事项(不做原理分析), ...

  9. Java数组与栈内存、堆内存

    package ch4; /** * Created by Jiqing on 2016/11/9. */ public class ArrayInRam { public static void m ...

  10. zzulioj--1825-- 会长爱数学(模拟)

    1825: 会长爱数学 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 6  Solved: 2 SubmitStatusWeb Board Descr ...