今天试了一下用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. 聊聊jvm系列

    http://blog.csdn.net/column/details/talk-about-jvm.html

  2. P1484 种树

    P1484 种树 题意: 在n个数中选出至多k个数,且两两不相邻,并使所选数的和最大. n<=500000  思路 先建一个堆,把所有点扔进去,当取出队首元素时累加到答案时,把它和它左右两个点一 ...

  3. (转)rpm2cpio和cpio

    原文:https://blog.csdn.net/jubincn/article/details/6687550 rpm2cpio命令:将rpm格式的文件转为cpio格式的文件.rpm是linux中常 ...

  4. Pycharm常用快捷键，以及设置

    工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍 一 常用快捷键 编辑类: Ctrl + D             复制选定的区 ...

  5. 恶性bug解决，Encoding 1252 data could not be found. Make sure you have correct international codeset assembly installed and enabled

    百度是没有的,google了下 这句话的意思是编码1252没找到,确保程序及是国际化格式 发生在我使用unity读取xlsx文件,在编辑器运行正常,但是发布出来不正常,报错 解决方案: 链接:http ...

  6. 面试题27：单链表向右旋转k个节点

    Given a list, rotate the list to the right by kplaces, where k is non-negative. For example:Given1-& ...

  7. js拼图

    ;(function($){ function arrayIndexOf(r, num){ if( Array.prototype.indexOf ){ return r.indexOf(num); ...

  8. onsubmit解惑

    1.onsubmit的位置: onsubmit只存在于html <form>中,js的form中 2.submit与onsubmit的区别 发生顺序:onsubmit -> subm ...

  9. SpringBoot入门 (六) 数据库访问之Mybatis

    本文记录学习在SpringBoot中使用Mybatis. 一 什么是Mybatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 ...

  10. json-lib使用——JSONObject与JSONArray

    ps:看这篇博客之前首先要引入工具包json-lib-2.2.2-jdk15.jar 资源链接:百度云:链接:https://pan.baidu.com/s/1o9k7PSu 密码:00lj 一.从O ...