jquery attr处理checkbox / select 等表单元素时的坑
先上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 等表单元素时的坑的更多相关文章
- jquery attr处理checkbox / select 等表单元素时只能使用一次的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- Jquery学习笔记：操作form表单元素之二（复选框和单选框）
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- input、select等表单元素的对齐问题
今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...
- jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
- 深入学习jQuery选择器系列第七篇——表单选择器
× 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- 基于JQuery实现表单元素值的回写
form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB ...
- jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
- jQuery使用之（四）处理页面的表单元素
表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...
随机推荐
- 转账示例（三）：service层面实现（线程管理Connection）（本例采用QueryRunner来执行sql语句，数据源为C3P0）
缺点:Service层面还是不应该出现关于事务的操作1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learning.dao; impo ...
- LINUX ON AZURE 安全建议（全）
本文为个人原创,可以自由转载,转载请注明出处,多谢! 本文地址:http://www.cnblogs.com/taosha/p/6399554.html 1.网络与安全规划 Azure 虚拟网络 (V ...
- 构造函数与普通函数的区别还有关于“new”操作符的一些原理
有一种创建对象的方法叫做工厂模式,例如: function person(name,age){ var o=new Object(); o.name=name; o.age=age; return o ...
- spring 动态创建数据源
项目需求如下,公司对外提供服务,公司本身有个主库,另外公司会为每个新客户创建一个数据库,客户的数据库地址,用户名,密码,都保存在主数据库中.由于不断有新的客户加入,所以要求,项目根据主数据库中的信息, ...
- 【转载】google搜索从入门到精通
原文地址:http://www.cnblogs.com/helloIT/articles/5095668.html /***************************************** ...
- CF #344 D. Messenger KMP/Z
题目链接:http://codeforces.com/problemset/problem/631/D 给定两个压缩形式的字符串,如a3b5a4k7这样的形式 问A在B中出现次数. 分类讨论,如果A是 ...
- HDU 3948 不同回文子串个数
集训队论文中有求不同子串个数的做法,就是扫一遍height数组,过程中根据height数组进行去重.对于本题也是雷同的,只是每一次不是根据与排名在上一位的LCP去重,而是与上一次统计对答案有贡献的后缀 ...
- RabbitMQ基础
上一博客把RabbitMQ的安装配置介绍了下,今天主要是介绍下RabbitMQ的一些基础名词. 一.什么是RabbitMQ?用它能做什么? 1.简介 AMQP,即Advanced Message Qu ...
- 在Ueditor / Umeditor中实现上传图片跨域
近几天公司的后台管理需要图文编辑文章,但是ueditor提供的方法中,本地图片的上传是通过flash的方式处理的,且不支持跨域.若要在已经前后端分离的Angular项目中使用,需要做复杂的环境配置.跟 ...
- [原创]一种基于Python爬虫和Lucene检索的垂直搜索引擎的实现方法介绍
声明:本文首发在博客园晨星落羽,Shulin_Cao和lvmememe首页,转载请注明出处. 前言 2016.5到2017.5,我们三人(lvmememe,Shulin_Cao,晨星落羽)共同完成了一 ...