本篇文章是关于复选框的，有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. css 做幻灯片效果

     设置一个div 盒子 <div class="ani"></div> 设置css 样式 .ani{ width:480px; height:320px; ...

  2. Express-及中间件的简单理解

    Express Express 是一个基于node平台,保持最小规模的灵活的 Node.js Web 应用程序开发框架,在Node.js基础上扩展对了web应用开发所需要的基础功能为 Web 和移动应 ...

  3. Java 子类父类构造方法执行顺序

    public class Test { class Super { int flag = 1; Super() { test(); } void test() { System.out.println ...

  4. Webpack学习错误解决笔记

    错误1:在用npm install 安装模块时,时常会出现没有以下类似的错误 解决方法:右键点击node_modules文件夹,选取属性,将文件夹只读选项去除 错误2:在学习到清理/dist文件夹这块 ...

  5. Vue中引入jquery方法

    vue-cli webpack 引入jquery   今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的 ...

  6. PigGo+Github图床，编写本地markdown

    平时用markdown做笔记比较多,比较正式完整一点的笔记会用CmdMarkdown,编写过程贴图比较方便,但是有时候需要做本地的笔记,会用typora,typora虽然好用,但是贴图比较麻烦,这里可 ...

  7. [JZOJ6089]【CodeChef 2014 April Challenge】Final Battle of Chef【数据结构】【整体二分】

    Description \(n,q,V\leq 100000,w_i\leq 10^9\) Solution 又是一道大数据结构 由于有一个下取整,这就导致了不同时间的修改值是不能简单的直接加在一起的 ...

  8. 图解http 笔记

    一,了解web以及网络基础 1,使用http协议访问web web页面是由web浏览器根据地址栏中指定的url从web服务器获取文件资源等信息然后显示的页面. 像这种通过发送请求获取服务器资源的web ...

  9. android：activity知识点

    一.活动流程 1.创建活动 public class firstActivity extends Activity{} 2.创建布局 新建first_layout.xml文件 3.注册活动 在andr ...

  10. trace跟踪代码运行

    System.Diagnostics命名空间中. 1.Trace.Assert(a==12,"等于就不输出,不等于弹出对话框");   名称 描述   Assert(Boolean ...