全选全不选

界面：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

</head>

<body>

    <input type="checkbox" id="checkall" />全选/全不选

    <br/>

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

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

    <input type="checkbox" name="items" value="游泳" />游泳

    <input type="checkbox" name="items" value="唱歌" />唱歌

    <input type="checkbox" name="items" value="读书" />读书

    <br/>

    <input type="button" id="checkall_1" value="全选"/>

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

    <input type="button" id="checkarev" value="反选"/>

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

    <script type="text/javascript">

    //全选全不选

    $(document).ready(function(){

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

            if (($("#checkall").prop("checked"))){

            $(":input[name='items']").attr("checked",true);

            }else{

            $(":input[name='items']").attr("checked",false);

            }

        });

    });

    //全选

    $(document).ready(function(){

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

            $(":input[name='items']").attr("checked",true);

        });

    });

    //全不选

    $(document).ready(function(){

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

        //方式一

            $(":input[name='items']").attr("checked",false);

        //方式二

            // $("input[name='checkbox']").removeAttr("checked");

        });

    });

    //反选

    $(document).ready(function(){

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

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

        //attr

        //1.attr("checked"):返回被选中元素的属性值

        //2.attr("checked",true)：设置选中属性

            if (this.checked) {

                $(this).prop("checked",false);

            }else{

                $(this).prop("checked",true);

            }

            });

        });

    });

    </script>

</body>

</html>

【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]的更多相关文章

  1. Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

    1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...

  2. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  3. 查找索引/ie滤镜/动态背景/属性attr和prop

    1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...

  4. jQuery元素属性attr设置多个键值或函数 删除属性removeAttr

    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") $("El ...

  5. jQuery知识点：attr与prop的区别

    做项目时遇到个莫名的问题,全选的时候仅第一次有效,再次点击全选按钮是无效了,查了查原因,看到篇很不错的文章,问题出在jquery中的attr属性上,这里做下笔记. 原文链接:http://www.cn ...

  6. jquery中attr和prop的区别—判断复选框选中状态

    最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料发现jQuery 1.6以后新增加了prop()方法,借用官方的一段描述 ...

  7. 【jQuery 区别】attr()和prop()的区别

    1>>> 今天实现一个 点击更新按钮 ,可以勾选上本行的的checkbox的功能: 使用代码: /** * updateproduct.htmls 更新 产品信息 */ $(docu ...

  8. jQuery中的attr()和prop()使用

    总结:除了checked.seleted这样的属性推荐用prop()外,其他的随意都可以. 原因如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  9. jquery中的attr与prop的区别,什么时候用attr,什么时候用prop

    只要有 Boolean() 属性的,简单说就是具有true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),(其实这些都是表单类的), ...

随机推荐

  1. Java编程基础篇第四章

    循环结构 循环结构的分类 for循环,while循环,do...while()循环 for循环 注意事项: a:判断条件语句无论简单还是复杂结果是boolean类型 b:循环体语句如果是一条语句,大括 ...

  2. 前端模板 artTemplate之辅助方法template.helper

    var labelMap = { onlinePayment:{ label:"在线支付", desc:"支持大部分储蓄卡.信用卡及第三方平台支付", name ...

  3. 架构4（lvs lb集群解决方案二 lvs+keepalived）

    keepalived 1.实现调度器的HA 2.对realserver做健康检测 3.动态维护ipvs路由表

  4. Recurrent NN vs Recursive NN

    https://www.bilibili.com/video/av9770302/?p=8 李宏毅深度学习 图很清楚的反映出两者的不同 Recurrent可以看成Recursive的特殊形式,即以特定 ...

  5. asp.net mvc 简单实现一个账号只能在一个地方登录

    原理:  假设用户在机器A登陆后,  这时用户再次在机器B登陆,会以当前会话的SessionID作为键,用户id作为值,插入dictionary集合中,集合再保存在application(保存在服务器 ...

  6. 16.4-uC/OS-III同步 （任务信号量）

    信号量和消息队列均是单独的内核对象,是独立于任务存在的. 任务信号量 仅发布给一个特定任务 .任务消息队列 可以发布给多个任务. 任务信号量伴随任务存在,只要创建了任务,其任务信号量就是该任务的一个数 ...

  7. OpenMVG学习笔记

    OpenMVG 是一个不错的SFM开源算法库,可以实现基于多视图像的稀疏重建. OpenMVG SfM pipelines run as a 4 step process:包含四个基本过程 1. Im ...

  8. Struts2重要知识点总结

    一.interceptor拦截器的使用 第一种情况(指定action使用该拦截器):struts.xml文件的配置: <interceptors> <interceptor name ...

  9. Mybatis入门及于hibernate的区别

    pojo:不按mvc分层,只是java bean有一些属性,还有get set方法domain:不按mvc分层,只是java bean有一些属性,还有get set方法po:用在持久层,还可以再增加或 ...

  10. 微信小程序获取用户手机号详解

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...