本篇文章是关于复选框的，有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版本有关。

复选框demo的更多相关文章

  1. web前端 ajax加载动态生成复选框demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  3. 复选框、单选框 jquery判断是否选中Demo

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="eachcheckbox.a ...

  4. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  5. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  6. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  7. WPF:带复选框CheckBox的树TreeView

    最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...

  8. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  9. Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

    QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...

随机推荐

  1. 手把手封装数据层之DataUtil数据库操作的封装

    上一篇我们写完了数据库连接的封装 没有看的请移步上一篇关于数据库连接的内容 这次我们讲数据库操作的封装.数据库的操作就是增删改查:心再大一点就可以直接分为查询和其他. 因为查询是有返回对象的,而其他都 ...

  2. sed武功心法(info sed翻译+注解)

    本文中的提到GNU扩展时,表示该功能是GNU为sed提供的(即GNU版本的sed才有该功能),一般此时都会说明:如果要写具有可移植性的脚本,应尽量避免在脚本中使用该选项. 本文中的正则表达式几乎和gr ...

  3. php 数据访问练习：租房查询页面

    <html> <head> <title></title> <meta charset="UTF-8"/> <li ...

  4. Haproxy基于ACL做访问控制

    author:JevonWei 版权声明:原创作品 haproxy配置文档 https://cbonte.github.io/haproxy-dconv/ 基于ACL做访问控制(四层代理) 网络拓扑 ...

  5. BootKit病毒——“异鬼Ⅱ”的前世今生

    七月底,一种名为"异鬼Ⅱ"的木马在全网大肆传播.一个多月过去了,风声渐渐平息,之前本来准备专门就这个木马写一篇博客的,结果拖到现在,幸好时间隔得还不算太久.闲话不多说,回到正题. ...

  6. Java内存模型：volatile详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt202 Java内存模型:volatile是干什么用的Volatile字段是用 ...

  7. C和C++中的名字空间和作用域

    C和C++中的名字空间和作用域 C语言中有名字空间这个概念吗? 提到名字空间(或者可能更普遍的叫法,命名空间),很可能先想到的是C++,甚至是C#.C中没有名字空间吧?一开始我也是这样认为的,直到我看 ...

  8. 原创：LNMP架构部署个人博客网站 禁止转载复制

    nginx编译安装步骤 ①. 检查软件安装的系统环境 cat /etc/redhat-release uname -r ②. 安装nginx的依赖包(pcre-devel openssl-devel) ...

  9. 个人作业2——英语学习APP的案例分析

    第一部分:调研.评测 1.刚刚打开必应词典的时候,它给我的第一反应就是界面美观,最上面是一个查询框,下面有一些经典的句子.单词以及一些精选的文章,所有的功能都可以一目了然,看一眼就知道要怎么去使用,这 ...

  10. 201521123104《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)继承时子类将获得父类的属性与方法,并具有自身特有的属性与方法. (2)使用super还 ...