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",// 判断点击后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之后，对于元素固有的属性，应该使用 <strong>prop()</strong> 方法。
<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 等表单元素时的问题的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
WIN10服务主机太占cpu的处理操作过程
Mar 27, 2024 pm 02:41 PM
1、首先我们右击任务栏空白处，选择【任务管理器】选项，或者右击开始徽标，然后再选择【任务管理器】选项。2、在打开的任务管理器界面，我们点击最右端的【服务】选项卡。3、在打开的【服务】选项卡，点击下方的【打开服务】选项。4、在打开的【服务】窗口，右击【InternetConnectionSharing(ICS)】服务，然后选择【属性】选项。5、在打开的属性窗口，将【打开方式】修改为【禁用】，点击【应用】后点击【确定】。6、点击开始徽标，然后点击关机按钮，选择【重启】，完成电脑重启就行了。
学习PHP中如何处理特殊字符转换单引号
Mar 27, 2024 pm 12:39 PM
在PHP开发过程中，处理特殊字符是一个常见的问题，尤其是在字符串处理中经常会遇到特殊字符转义的情况。其中，将特殊字符转换单引号是一个比较常见的需求，因为在PHP中，单引号是一种常用的字符串包裹方式。在本文中，我们将介绍如何在PHP中处理特殊字符转换单引号，并提供具体的代码示例。在PHP中，特殊字符包括但不限于单引号（'）、双引号（"）、反斜杠（）等。在字符串
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
如何判断jQuery元素是否具有特定属性？
Feb 29, 2024 am 09:03 AM
如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属
了解jQuery中eq的作用及应用场景
Feb 28, 2024 pm 01:15 PM
jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s
PHP编程技巧：如何处理最后一个分号的情况
Mar 26, 2024 pm 12:45 PM
PHP编程技巧：如何处理最后一个分号的情况在PHP编程中，经常会遇到需要处理最后一个分号的情况。特别是在循环和条件语句中，很容易因为少写或多写一个分号而导致程序错误。为了避免这种情况的发生，我们可以采取一些编程技巧来处理最后一个分号的情况。以下是一些处理最后一个分号的常用技巧和代码示例：1.使用if语句判断最后一个分号
