先上html结构

<body>

    <form action="">

        <input type="checkbox" id="checkedAll">全选/全不选<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="乒乓球">乒乓球<br>

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

    </form>

</body>

如图，这是前端进阶经典书籍【锋利的jquery】中的一个案例，使用attr方法给元素添加属性以达到选中与取消效果。

要求：1. 点击全选/全部选，改变下面四个复选框选中状态；

2. 单独点击下方按钮，只要存在未选中的，则上方全选/全不选为未选中状态，全部选中，则上方全选/全不选也自动变为选中状态。

<script>

    $("#checkedAll").on("click",function(){
        // 判断点击后this.checked的结果，默认未选中即为false，第一次点击则为true,第二次为false,再赋值给下面的input（此处逻辑与书上稍有不同）
        // 注意事项： 使用attr给表单元素设置选中状态时，第二个参数一定要是布尔值true/false,不能习惯性写成带引号，那就是字符串了。
        if(this.checked){

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

        }else{

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

        }

    })

</script>

运行起来似乎没问题，但当多次点击之后会发现，属性可以添加上去，但选中状态并没有改变。

what's wrong?

这就要归宿到jQuery的版本问题了，在1.6之后，对于元素固有的属性，应该使用  prop() 方法。

<script>

    $("#checkedAll").on("click",function(){

        console.log(!this.checked);

        if(this.checked){

            $("input[name=items]").prop("checked",true);

        }else{

            $("input[name=items]").prop("checked",false);

        }

    })

</script>

以上代码还可以精简为

<script>

    $("#checkedAll").on("click",function(){

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

    })

</script>

jquery attr处理checkbox / select 等表单元素时只能使用一次的坑的更多相关文章

  1. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  2. Jquery学习笔记：操作form表单元素之二（复选框和单选框）

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  3. input、select等表单元素的对齐问题

    今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...

  4. jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

  5. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  6. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  7. 基于JQuery实现表单元素值的回写

    form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB ...

  8. jQuery操作Form表单元素

    Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...

  9. jQuery使用之（四）处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...

随机推荐

  1. C# Code First 配置

    前言 所谓code first,是代码优先,而不是传统的数据库优先. code first的好处多多,可不用考虑数据库,只考虑面向对象.下面我们介绍一下code first的配置. 下一篇文章地址:C ...

  2. [转]Winform开发框架的重要特性总结

    本文转自:https://www.cnblogs.com/wuhuacong/p/3199829.html 从事Winform开发框架的研究和推广,也做了有几个年头了,从最初的项目雏形到目前各种重要特 ...

  3. C# 金额转中文大写

    今天看到一个库是把金额转中文大写,看起来很容易,所以我就自己写了 创建的项目是创建一个 dot net core 的项目,实际上这个项目可以创建为 Stand 的. 首先创建类,这个类的构造传入一个 ...

  4. C#微信小程序服务端获取用户解密信息

    using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.C ...

  5. [日常] Go语言圣经-文本和HTML模板习题

    Go语言圣经-文本和HTML模板 练习 4.14: 创建一个web服务器,查询一次GitHub,然后生成BUG报告.里程碑和对应的用户信息. 1.查看下文档godoc net/http |grep H ...

  6. 【RabbitMQ】1、RabbitMQ的几种典型使用场景

    RabbitMQ主页:https://www.rabbitmq.com/ AMQP AMQP协议是一个高级抽象层消息通信协议,RabbitMQ是AMQP协议的实现.它主要包括以下组件: 1.Serve ...

  7. C++11 使用 std::async创建异步程序

    c++11中增加了线程,使得我们可以非常方便的创建线程,它的基本用法是这样的: void f(int n); std::thread t(f, n + 1); t.join(); 但是线程毕竟是属于比 ...

  8. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  9. javax.net.ssl.SSLHandshakeException sun.security.validator.ValidatorException PK

    javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building f ...

  10. Object.assign简单总结

    定义 Object.assign方法用来将源对象source的所有可枚举属性复制到目标对象target.至少需要两个对象作为参数,第一个参数为源对象,后面的均为目标对象.(以下用source代指源对象 ...