先上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. SQL 查询结果加序列号

    SQL ROW_NUMBER() OVER(ORDER BY ID) Oracle rownum

  2. sqlhelper中事务的简单用法

    sql1="INSERT INTO tablename(Id,col1,col2) VALUES(@Id,@col1,@col2) update tablename2 set col=@co ...

  3. [日常] Go语言圣经--结构体,JSON习题

    Go语言圣经-结构体 1.结构体是一种聚合的数据类型,是由零个或多个任意类型的值聚合成的实体 2.通常一行对应一个结构体成员,成员的名字在前类型在后,不过如果相邻的成员类型如果相同的话可以被合并到一行 ...

  4. Android四大组件-Content Provider

    http://www.jianshu.com/p/c3ce81b638bd 一.基础回顾. 简介ContentProvider(数据提供者)是在应用程序间共享数据的一种接口机制,虽然我们可以采用文件存 ...

  5. CSS canvas 捕捉视频video元素截图

    video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...

  6. javascript预编译的过程

    预编译的两种情况 全局: 1.全局 直接是script标签中的代码,不包括函数执行执行前:1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析2.分析变量声明,变量 ...

  7. css inline元素和inline-block元素之间缝隙产生原因和解决办法

    行内元素产生水平空隙的原因及解决方案 这篇文章讲的很好,但是提供的解决方案没有这篇好实现 去除inline-block元素间间距的N种方法

  8. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

  9. 语义SLAM的数据关联和语义定位（四）多目标测量概率模型

    多目标模型 这部分想讲一下Semantic Localization Via the Matrix Permanent这篇文章的多目标测量概率模型.考虑到实际情况中,目标检测算法从单张图像中可能检测出 ...

  10. JQuery判断数组中是否包含某个字符串

    var arry = [ "C#", "html", "css", "JavaScript" ]; var result ...