今天试了一下用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. php的GC机制

    在php5.3版本之前, php变量的回收机制只是简单的通过计数来处理(当refcount=0时,会回收内存),但这样会出现一个问题 $a=array("str"); $a[]=& ...

  2. VmWare扩展硬盘分区

    扩展硬盘 对硬盘进行分区 () 查看现有的硬盘分区情况 [mysql@china ~]$ df -h Filesystem Size Used Avail Use% Mounted on /dev/m ...

  3. 02--STL算法（函数对象和谓词）

    一:函数对象(仿函数):实现状态记录等其他操作<相对于普通函数> 重载函数调用操作符的类,其对象常称为函数对象(function object),即它们是行为类似函数的对象. 即是重载了“ ...

  4. java的Arrays工具类

    1年多了,jdk还不是很熟,补补. package lhy.core.util; import java.util.Arrays; import java.util.List; public clas ...

  5. LINUX 下 NMAP 内网扫描

    #1.扫描内网存活主机 nmap -sP 10.2.24.* |grep for > tmp #2.扫描主机端口 nmap -A -T4 192.168.1.2 #3.扫描主机的所有端口 nma ...

  6. CSS3中的pointer-events

    今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题.之前没有好好研究,于是决定仔细研究一下. 一.定义及语法 ...

  7. 【数组】Best Time to Buy and Sell Stock I/II

    Best Time to Buy and Sell Stock I 题目: Say you have an array for which the ith element is the price o ...

  8. Android 开发工具类 07_ScreenUtils

    获得屏幕相关的辅助类: 1.获得屏幕高度: 2.获得屏幕宽度: 3.获得状态栏的高度: 4.获取当前屏幕截图,包含状态栏: 5.获取当前屏幕截图,不包含状态栏. import android.app. ...

  9. Android_读取元素的数据

    在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...

  10. C/C++ -- Gui编程 -- Qt库的使用 -- 使用自定义类

    1.新建空Qt工程 2.新建C++类HelloQt 3.新建ui文件,添加部件,重命名主窗体(对话框)类名HelloQt,构建生成ui头文件 4.修改头文件helloqt.h #ifndef HELL ...