本篇文章是关于复选框的，有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. “全栈2019”22篇Java异常学习资料及总结

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"22篇Ja ...

  2. “全栈2019”Java第九十七章：在方法中访问局部内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. C#-WebForm-AJAX阿贾克斯（二）★★★★★ajax的完整结构★★★★★

    ajax完整结构: $.ajax({ url:"",//服务器路径 data:{},//给服务端传递的参数,可以没有,也可以是多个 type:"post", / ...

  4. C#接口实现多态

    我比较喜欢对感兴趣的理论进行反复的理解甚至理解背诵下来,接下来再复习一下什么叫多态(哈哈哈) 多态:在同一粒度视图下对相同类型的事物不做区别的统一操作 接下来看一下接口和引擎类是如何实现多态的: 一. ...

  5. JDK7,8,JD9的hashmap，hashtable，concurrenthashmap及他们的区别

    1:hashmap简介(如下,数组-链表形式) HashMap的存储结构 图中,紫色部分即代表哈希表,也称为哈希数组(默认数组大小是16,每对key-value键值对其实是存在map的内部类entry ...

  6. 【性能测试】：LR插入mysql数据库数据，脚本参数化问题

    一,今天准备脚本做mysql数据库的铺地数据,脚本内容不赘述,在批量执行insert语句时候,出现一个问题: // sprintf(chQuery, "insert into table ( ...

  7. 用idea搭建一个简单的SSM的Demo

    1.新建一个maven  web app项目 结构如下 resources的资源文件如下 applicationContext.xml 的配置 <?xml version="1.0&q ...

  8. reifiable type与raw type

    下面的逻辑需要明白如下两个概念: 4.7. Reifiable Types 4.8. Raw Types 举几个是Reifiable Types的例子,如下: class A{} class B< ...

  9. FX4300超频4.7GHz

    先贴出本人计算机配置: (本人cpu为fx4300,默认频率为3.8GHz) 谨记:超频有风险,很可能烧坏主板.cpu.内存等硬件,特别是增加主板电压时一定一次增加0.025V,不要一次增加太多,并且 ...

  10. InnoDB索引概述,二分查找法,平衡二叉树

    索引是应用程序设计和开发的一个重要方面.如果索引太多,应用的性能可能会受到影响:如果索引太少,对查询性能又会产生影响.要找到一个合适的平衡点,这对应用的性能至关重要. 如果知道数据的使用,从一开始就应 ...