先上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. V8源码边缘试探-黑魔法指针偏移

    这博客是越来越难写了,参考资料少,难度又高,看到什么写什么吧! 众多周知,在JavaScript中有几个基本类型,包括字符串.数字.布尔.null.undefined.Symbol,其中大部分都可以在 ...

  2. JavaSE Collections类 , Iterator迭代器 , 增强for循环

    Collections 它是集合的工具类,为集合体系扩展了一些其他的方法.类中都是静态的方法,可以使用类名直接调用. 可变参数 在JDK1.5之后,如果我们定义一个方法需要接受多个参数,并且多个参数类 ...

  3. Java多线程--JDK并发包(1)

    Java多线程--JDK并发包(1) 之前介绍了synchronized关键字,它决定了额一个线程是否可以进入临界区:还有Object类的wait()和notify()方法,起到线程等待和唤醒作用.s ...

  4. Herding(hdu4709)三点运用行列式求面积

    Herding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. 4+1视图与UML对应关系

    4+1视图模型概况     Kruchten 提出了一个"4+1"视图模型,从5个不同的视角包括包括逻辑试图.进程视图.物理视图.开发视图.场景视图来描述软件体系结构.每一个视图只 ...

  6. mybaits模糊查询使用<bind>标签

    <select id="selectBlogsLike" resultType="Blog"> <bind name="patter ...

  7. AJAX通过HTML请求C#一般处理程序

    AJAX通过HTML请求C#一般处理程序 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

  8. jquery判断浏览器的内核

    <script type='text/javascript'> $(function(){ if($.browser.msie) { alert("IE浏览器"); } ...

  9. SD从零开始01-02

    SD从零开始1 SD中的组织结构 销售相关的组织结构: 销售组织Sales organization 分销渠道Distribution channel 产品组Division 销售区域Sales ar ...

  10. 用venv 配置不同的开发环境

    首先使用pip 命令安装 pip install virtualenv   (以下是使用win10 操作系统) 1: 在工作目录下创建一个文件夹 mkdir mypython_space 2:然后执行 ...