jQuery——复选框操作
学习jQuer对表单、表格操作的过程中，按照书上的例子发现一个问题：
<!DOCTYPE html>
<html>
<head>
<title>复选框应用</title>
<style type="text/css">
form{
border:1px solid #ccc;
width:300px;
padding:10px;
margin:auto;
}
</style>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//书上如此添加按钮事件处理——问题：当单击触发了反选事件之后，再次点击“全选”、“全不选”按钮不起作用，需要按照如下修改，即使用each()方法，才可以；或者将attr()方法修改为prop()方法也可实现预期
// $("#CheckedAll").click(function(){
// $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
// });
// $("#CheckedNo").click(function(){
// $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
// }); $("#CheckedAll").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=true;
});
});
$("#CheckedNo").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=false;
});
});
$("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox").each(function(){
if(this.checked)
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>
</head>
<body>
<form>
你爱好的运动是？<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="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
</body>
</html>
以下代码同样使用prop()函数，使用attr()方法也不能实现预期
<!DOCTYPE html>
<html>
<head>
<title>复选框应用</title>
<style type="text/css">
form{
border:1px solid #ccc;
width:500px;
padding:10px;
margin:auto;
font-size:20px;
}
</style>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#CheckedAll").click(function(){
$("[name=items]:checkbox").prop("checked",this.checked);
}); $("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked)
flag=false;
});
// alert($("#CheckedAll")[0]);
// alert($("#CheckedAll")[0].getAttribute("checked"));
//此处使用attract()方法，在IE中和在chrome中均不能实现预期，需要修改为prop()方法
// $("#CheckedAll").attr("checked",flag);
$("#CheckedAll").prop("checked",flag);
// alert($("#CheckedAll").prop("checked"));//使用attr()时，返回undifined
}); $("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
// $(this).prop("checked",!$(this).attr("checked"));
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox").each(function(){
if(this.checked)
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="CheckedAll" value="全选/全不选" />全选/全不选<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="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
</body>
</html>
jQuery——复选框操作的更多相关文章
- jquery 复选框操作-prop()的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- jquery复选框操作
$('input[type="checkbox"]').change(function(e) { var checked = $(this).prop("checked& ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- python之tkinter使用-复选框操作
# tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口 ...
- C#：复选框操作类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- Jquery复选框
Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- JS及Dom练习 | 模态对话框及复选框操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Thymeleaf+layui+jquery复选框回显
一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...
- 【jQuery】对于复选框操作的attr与prop
这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...
随机推荐
- react native 之 AsyncStorage
新版本中不时从react-native导入了,而是 react-native-async-storage 使用static setItem(key: string, value: string, [c ...
- Oracle In子句
Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...
- eclipse配置apache tomcat运行时访问路径不需要项目名称
问题:tomcat运行项目默认是要带上项目名的,有时候不想要项目名来访问,如何解决呢? 方法: 1:双击打开tomcat 2:选择Modules,选择你要修改的项目 3:点击Edit,把path修改成 ...
- [springboot jpa] [bug] Could not open JPA EntityManager for transaction
前言 最近,测试环境遇到了一个问题.经过一番百度加谷歌,终于解决了这个问题.写下这篇博客是为了记录下解决过程,以便以后查看.也希望可以帮助更多的人. 环境 java版本:8 框架:spring clo ...
- （转）GitHub中PR(Pull request)操作 - 请求合并代码
转:https://www.jianshu.com/p/b365c743ec8d 前言 本文尽量使用图形工具介绍如何向开源项目提交 Pull Request,一次亲身经历提交 PR 1.fork 项目 ...
- MySQL多表查询合并结果union all,内连接查询
MySQL多表查询合并结果和内连接查询 1.使用union和union all合并两个查询结果:select 字段名 from tablename1 union select 字段名 from tab ...
- netstat和ps
ps是查看进程, 主要是针对本机的, 进程活动, 更多的是关注性能, 关注对机器 资源的使用清况 netstat是查看网络状态, 主要是针对网络的.是查看网络上, 对内网 外网的活动情况, 更多的是关 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_5_文件存储的原理和记事本打开文本显示原理
原理 流对象指向这个文件a.txt 往文件中写数据,写的时候比较特殊 97转换成二进制是多少呢? 输入97然后选择二进制.转换后为 1100001 硬盘上实际存的是97的二进制 97查询阿斯克码表就是 ...
- 红米4高配版 qusb bulk unknow device 不加电，不亮灯，没反应的 黑砖 的维修方法
unknow device处理 1. 按住按住音量减键和开机键3分钟左右 (我按了10秒左右,就成功了.) unknow device 就变qualcomm hs-usb qdloader 9008 ...
- Hadoop实战内容摘记
Hadoop 开源分布式计算平台,前身是:Apache Nutch(爬虫),Lucene(中文搜索引擎)子项目之一. 以Hadoop分布式计算文件系统(Hadoop Distributed File ...