今天试了一下用jquery选择复选框，本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法。

html代码如下（这里没有用任何样式，就没有再放css了）：

<html>

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="test_ch5.css" >

        <title>test_ch5</title>

    </head>

    <body>

        <div id="wrapper">

            <form action="" method="post">

                    <p>你最爱好的运动是？</p>

                    <input type="checkbox" name="items" >足球

                    <input type="checkbox" name="items">篮球

                    <input type="checkbox" name="items">羽毛球

                    <input type="checkbox" name="items">乒乓球<br>

                    <input type="button" id="all" value="全 选">

                    <input type="button" id="no" value="全不选">

                    <input type="button" id="reverse" value="反 选">

                    <input type="button" id="send" value="提 交">

                </form>

        </div>

    </body>

<script src="jquery-3.2.1.js"></script>

<script>

    $(function(){

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

            $('[name=items]:checkbox').prop('checked',true);

        });

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

            $('[type=checkbox]:checkbox').prop('checked',false);

        });

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

            $('input[name=items]').each(function(){

                $(this).prop('checked',!$(this).prop('checked'));

            });

        });

 })

</script>

</html>

界面如下：

之前不知道有prop，使用prop的地方全部用的是attr，发现实现不了想要的功能啊，然后才发现的prop，它是是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

jquery实现复选框全选，全不选，反选中的问题的更多相关文章

  1. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  4. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  5. element-ui 复选框,实现点击表格当前行选中或取消

    背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...

  6. java：JavaScript3（innerHTML，post和get，单选框，多选框，下拉列表值得获取，JS中的数组，JS中的正则）

    1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...

  7. layui 复选框checkbox 实现全选全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

  9. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

  10. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

随机推荐

  1. Manjaro Linux执行某些命令缺少libtinfo.so.5问题

    Manjaro默认有libtinfo.so.6而没有libtinfo.so.5,软件如果需要可执行以下命令安装: sudo pacman -S ncurses5-compat-libs #或 sudo ...

  2. linux系统上内网ip和和外网ip的关系

    1.不同服务之间的访问需要使用公网IP+端口才能访问 2.服务器上一般都是域名访问,服务器会把ip+端口映射成固定的域名,所以如果想访问服务器上其他应用,就必须的放开应用限制 问题,在服务器上放开对某 ...

  3. 清除float的方法

    清除浮动有两种方法: 一种是加入clear:both: 一种是BFC申明: <!doctype html><html><head><meta charset= ...

  4. 微服务是"银弹"吗？

    前言:所谓"银弹",本意是用金属银做成的子弹:在古老的传说里它是杀死狼人的有效武器.在著作<人月神话>也有描述.微服务是当前软件界流行的名词,那么它能成为像银弹一样厉害 ...

  5. eclipse中导入SVN项目步骤

    1.eclipse中安装SVN插件 在线安装步骤: (1)点击 Help --> Install New Software...(2)在弹出的窗口中点击add按钮,输入Name(任意)和Loca ...

  6. POJ 1046

    #include<iostream> using namespace std; #define MAXN 16 #define inf 100000000 struct node { in ...

  7. centos 7 keepalived故障邮件通知实战(附Python邮件发送脚本)

    centos 7 keepalived故障邮件通知实战(附Python邮件发送脚本) #####################     sendmail.py  begin     ######## ...

  8. 修改WAMPServer(Apache+PHP+MySQL一键式安装)中mysql默认空密码

    Note:在EclipsePHP中配置WorkSpace时,将工作目录指到执行PHP代码的www目录下 ,便于在Eclipse下编写PHP项目          eg:D:\KelvinSoftwar ...

  9. Android 手势识别—缩放

    上一篇讲解了手势识别中的点击和双击事件的识别,用到的是GestureDetector类和GestureDetectorCompat类,用于监听用户触摸屏幕中的简单动作. 缩放 基本用法如下,可以通过缩 ...

  10. java对象流与序列化

    Object流,直接把obj写入或读出. 前言: 比如 画图的程序,咣当画一个三角形出来,咣当画一正方形出来.然后存盘,当你下次再打开软件的时候三角形.方块还在原来的位置上.如果用面向对象的思维,三角 ...