今天试了一下用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. linux文件的硬连接和软连接

    建立软连接:ln -s 原路径 目标路径 原理示意图: 特点: 1.     相当于win中的快捷方式 2.     删除链接文件,源文件不受影响 3.     删除源文件,链接文件失效 4.     ...

  2. 【xsy1154】 DNA配对 FFT

    题目大意:给你一个字符串$s$和字符串$w$,字符集为${A,T,C,G}$,你要在字符串$s$中选出一个与$w$长度相同的子串,使得这两个串的差异度最小. 两个字符$c1$,$c2$的差异度为给定的 ...

  3. deepin安装Mariadb后,登录时出现ERROR 1045 (28000): Access denied for user 'root'@'localhost'

    安装Mariadb的时候设置了root密码,但是登录的时候出现了这样的提示 这里记录下我的处理方法.我是用的如果重置root密码的套路. 首先,在/etc/mysql/mariadb.conf.d/5 ...

  4. redis配置详细解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等: # # 1k => 1000 bytes # 1kb = ...

  5. Postman—使用数据文件

    前言 数据文件是非常强大的方式使用不同的测试数据来测试我们的API,以检查它们是否在各种情况下都能正常运行.我们可以认为数据文件是“Collection Runner”中每个请求的参数.下面,通过一个 ...

  6. Linux vim 编辑命令

    vi命令命令模式:yy:复制 光标所在的这一行 4yy:复制 光标所在行开始向下的4行p: 粘贴dd:剪切 光标所在的这一行2dd:剪切 光标所在行 向下 2行D:从当前的光标开始剪切,一直到行末d0 ...

  7. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  8. centos6 内网可达，外网不可达 Network is unreachable

    错误内容 [root@djx-2 yum.repos.d]# ping 3.0.82.21 connect: Network is unreachable [root@djx-2 yum.repos. ...

  9. [CTSC 2018]假面

    Description 题库链接 有 \(n\) 个敌方单位,初始第 \(i\) 个单位的血量为 \(m_i\) .共 \(Q\) 次操作,分两种: 对某一个单位以 \(p\) 的概率造成 \(1\) ...

  10. Keepalived 无法自动转换主备角色，请关注 iptables 防火墙配置

    最近在研究服务器高可用集群 (HA)…… 搭建了主备两台Keepalived,配置什么的全是网上照抄的,被验证过无数遍的示例…… 然而Master和Backup无法自动切换.两边会同时绑定浮动IP(V ...