今天试了一下用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. 二：MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    上一篇博文MyBatis学习总结(一)——MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对u ...

  2. 多线程：多读少写锁(Readers–writer lock)

    先来几个同义词 readers–writer (RW) lock shared - exclusive lock multiple readers/single-writer lock multi-r ...

  3. Python面试题整理-更新中

    几个链接: 编程零基础应当如何开始学习 Python ? - 路人甲的回答 网易云课堂上有哪些值得推荐的 Python 教程? - 路人甲的回答 怎么用最短时间高效而踏实地学习 Python? - 路 ...

  4. spring boot整合Swagger2

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器 ...

  5. ruby：TypeError: 对象不支持此属性或方法（<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolink）

    我整理了一下 目前有三种方法,我是windows 7 64位, 答案中很多人是win8也成功了. 方法1:找到当前项目下 app/javascripts/applications.js  把里面的// ...

  6. Spring 小知识点

    一.引入配置文件的方式: 方式一: <context:property-placeholder location="classpath:jdbc.properties,classpat ...

  7. Python 开发

    1.GIL,CPython,Python跟编译器没关系,语言有多个编译器,如:JPython.IronPython等,其他语言如是.GIL对IO密集型友好,计算密集型惨淡 2.pass,定义空执行函数 ...

  8. mongodb-地理坐标存储查询

    mongodb可支持空间地理搜索: 查询器 $geoWithin Selects geometries within a bounding GeoJSON geometry. The 2dsphere ...

  9. springboot-11-servlet, listener, fitlter的添加

    springboot中添加servlet, filter, listener有2种方式: 代码注册servlet 和自动注解注册(在使用druid监控有使用过) 代码注册通过ServletRegist ...

  10. WPF根据ScrollViewer的滚动条出现与否来设置触发器Trigger

    先看一段代码 <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource ...