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 ...
随机推荐
- 函数求值（swust oj0274）
函数求值(0274) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1767 Accepted: 324 Accepted 14级卓 ...
- 实现自动登录：Filter 实现思路和方式
当你勾选(记住登录状态),用cookie保存用户名和密码.不勾选,cookie失效. 所有的页面都要经过autoLoginFilter.java 的过滤器,在这类中,必须要判断cookies不为nul ...
- 【PAT_Basic日记】1005. 继续(3n+1)猜想
#include <stdio.h> #include <stdlib.h> /** 逻辑上的清晰和代码上的清晰要合二为一 (1)首先在逻辑上一定要清晰每一步需要干什么, (2 ...
- android-studio-bundle-141.2178183首次执行Hello World的时候出现ADB not responding. If you'd like to retry, then please manually kill "adb.e的错误
这是由于有其他程序在占用adb.exe要使用的端口5037,打开命令提示符cmd,输入指令netstat -aon|findstr 5037查看在使用此端口的程序,如 8036即为占用该端口号的PID ...
- 【HDOJ 1085】数学问题，母函数
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- window下安装mysqldb模块（虚拟环境）
因为在虚拟环境下安装mysql-python走了许多弯路,各种环境问题,特此记录 直接使用pip安装mysql-python会报错 pip install MySQL-python 可以直接选择非虚拟 ...
- stl_组件
2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...
- 【代码学习】PHP 正则表达式
一.正则表达式介绍 正则表达式是用于描述字符排列和匹配模式的一种规则,主要用于字符串的匹配.查找.替换.分割等操作 ------------------------------------------ ...
- [系统启动]Printk与sched_clock_init的一点分析
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 在分析Linu内核启动的过程中,发现一段"不平常" ...
- JavaScript 中有关Array操作的一些函数
JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...