本篇文章是关于复选框的，有2种形式：1、全选、反选由2个按钮实现；2、全选、反选由一个按钮实现。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>复选框demo</title>

        <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>

        <style>

            body{ text-align:center}

            .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;}

        </style>

    </head>

    <body>

        <div class="con">

            <span><input type='checkbox' name='select' onclick='allSelect()'>全选</span>

            <span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反选</span>

            <span><input type='checkbox' name='fruit' />苹果</span>

            <span><input type='checkbox' name='fruit' />香蕉</span>

            <span><input type='checkbox' name='fruit' />梨子</span>

            <span><input type='checkbox' name='fruit' />桃子</span>

            <span><input type='checkbox' name='fruit' />西瓜</span>

            <br><br><br>

            <span><input type='checkbox' id="allBook"  name='allBook' />全选</span>

            <span><input type='checkbox' name='book' />老子</span>

            <span><input type='checkbox' name='book' />尚书</span>

            <span><input type='checkbox' name='book' />周易</span>

            <span><input type='checkbox' name='book' />诗经</span>

            <span><input type='checkbox' name='book' />孟子</span>

            <span><input type='checkbox' name='book' />中庸</span>

<script type="text/javascript">

    //全选

    function allSelect(){

        $("input[name='fruit']").prop("checked", "checked");

        $("input[name='cancel']").removeAttr("checked");

    }

    //反选

    function unAllSelect(){

        $("input[name='fruit']").removeAttr("checked");

        $("input[name='select']").removeAttr("checked");

    }

    //单选

    $("#allBook").click(function(){

        if(this.checked){

//            $("input[name='book']").attr("checked", true);

            $("input[name='book']").prop("checked", "checked");

          }else{

//          $("input[name='book']").attr("checked", false);

            $("input[name='book']").removeAttr("checked");

          }

    });

</script>

        </div>

    </body>

</html>

在实践中碰到一个问题——check全选失效。解决办法，使用prop方法代替attr。

$("input[name='book']").attr("checked", "checked");

$("input[name='book']").prop("checked", "checked");

这或许是和jQuery版本有关。

js复选框全选反选的更多相关文章

  1. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  3. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  7. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  8. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  9. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  10. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. AVA + Spectron + JavaScript 对 JS 编写的客户端进行自动化测试

    什么是 AVA (类似于 unittest) AVA 是一种 JavaScript 单元测试框架,是一个简约的测试库.AVA 它的优势是 JavaScript 的异步特性和并发运行测试, 这反过来提高 ...

  2. [CSS3] 各种角度的三角形绘制

    #triangle-up { width:; height:; border-left: 50px solid transparent; border-right: 50px solid transp ...

  3. P3292 [SCOI2016]幸运数字

    题目链接 题意分析 一句话题意 : 树上一条链中挑选出某些数 异或和最大 我们可以考虑维护一个树上倍增线性基 然后倍增的时候 维护一个线性基合并就可以了 写起来还是比较容易的 CODE: #inclu ...

  4. 【ASP.NET】DataTable导出EXCEL,弹窗提示下载保存（完整代码）

    //新建ASPX protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); Data ...

  5. JavaIO系统

    为了方便记忆,特将IO中涉及的类进行整理如下: 1.File类 提供了目录操作,查看文件属性等. 2.java IO类层次 面向字节流的类为InputStream.OutputStream:面向字符流 ...

  6. Django分页的实现

    Django分页的实现 Django ORM  分页介绍 分页是网页浏览中常见到的一种形式,在数据量较大时,一个页面显示不全,采取分割数据由用户选择进行显示的方式. 基本实现 技术点 通过切片得到数据 ...

  7. 【NOI2019十二省联合省选】部分题简要题解

    Day 1 T1 异或粽子 题意:给出一个长为n的序列,选择K个不完全重合的区间使得每个区间的异或值的总和最大. 题解:先做一个前缀异或和,对于每一个右端点我们记录三元组(l,r,x)表示在左端点在\ ...

  8. springboot(十三)-分库分表-手动配置

    sharding-jdbc简介 Sharding-JDBC直接封装JDBC API,可以理解为增强版的JDBC驱动,旧代码迁移成本几乎为零: 可适用于任何基于java的ORM框架,如:JPA, Hib ...

  9. 贪心--cf、education62-C

    cf-Education 62-C 题目 C. Playlist time limit per test 2 seconds memory limit per test 256 megabytes i ...

  10. sql server 2008 R2 配置管理工具打不开

    使用 sql server 配置管理工具是报如下错误: 解决方法:   1 找出 sqlmgmproviderxpsp2up.mof 这个文件的位置   2 以管理员身份运行 mofcomp &quo ...