本篇文章是关于复选框的，有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. find the Nth highest salary（寻找第N高薪水）

    Suppose that you are given the following simple database table called Employee that has 2 columns na ...

  2. 【渗透课程】第五篇-SQL注入的原理

    哈哈哈,讲到注入了.我想给大家讲注入的原理.这个我们前面的前言篇就说过,所谓的SQL注入就是,绕过数据库验证机制直接执行SQL语句.怎么说呢,我们先讲一个概念吧! 网站和网页的区别 单纯的网页是静态的 ...

  3. Django编写RESTful API（五）：添加超链接提高模型间的关联性

    前言 在第四篇中,加入了用户模型,以及相关的认证和权限的功能.但是我们在使用的时候,会发现在访问http://127.0.0.1:8000/users/时看到的用户列表,不能够直接点击某个链接然后查看 ...

  4. java异常—检查异常（checked exception）和未检查异常（unchecked exception）

    网易面试要我画异常的结构图,什么是检查异常,什么是非检查异常,我当时的表情是这样的,.我看过,忘了.没办法,继续看,写博客掌握. 先来看看异常的结构图,建议你结合JDK一起看. 可以看出异常的家族势力 ...

  5. Spark Structured Streaming框架（2）之数据输入源详解

    Spark Structured Streaming目前的2.1.0版本只支持输入源:File.kafka和socket. 1. Socket Socket方式是最简单的数据输入源,如Quick ex ...

  6. oracle字段由中文前缀加数字，数字自动增长的实现

    table中有一个字段,id,它是由Yunsha_000001的规则组成的. 每当插入一条数据的时候,自动生成的id是自动增加的,如何实现数字部分的自动增长? select  'Yunsha_'||l ...

  7. exjs上传图片异常：com.jspsmart.upload.SmartUploadException: File can't be saved (1120).

    错误: 文件名格式不对:未命??.jpg SmartUpload mySmartUpload = new SmartUpload(); com.jspsmart.upload.File myFile ...

  8. JDK+Apache+Tomcat+MySQL配置 一起来学习吧

    配置JDK1.8+Apache2.4+Tomcat8.0+mySQL5.1,网上的资料非常繁杂,花费几天时间配置成功,汇总记录. 操作系统:CentOS6.5 预先下载最新版软件: apache-to ...

  9. github+hexo搭建自己的博客网站（六）进阶配置(搜索引擎收录，优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  10. [我所理解的REST] 2.REST用来干什么的？

    笔者每当遇到一个新事物的想去了解的时候,总是会问上自己第一个问题,这个新事物是干什么用的?在解释我所理解的REST这个过程中也不例外,这篇博客我们先关注一下REST是干什么用的,然后后续再解释REST ...