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却不是 ...
随机推荐
- MIF文件生成说明
mif文件就是存储器初始化文件,即memory initialization file,用来配置RAM或ROM中的数据.生成QuartusII11.0可用的mif文件,有如下几种方式: 方法1:利用Q ...
- Codeforces 980D
这题其实挺水的,但我比较vegetable,交了好多次才过. 题意: 给定一个序列,把这个序列的所有连续子序列分组,每组中任意两个数相乘是个完全平方数,输出每个子序列最少分的组数: 思路: 先把每个数 ...
- windows10 ubuntu子系统 WSL文件位置
windows10 的linux子系统(windows subsystem for linux)WSL 文件位置 以我的系统为例,WSL的root目录对应windows的: C:\Users\xiao ...
- 配置maven方法
配置maven方法 1.官网下载maven, http://maven.apache.org/download.cgi Only the binaries are required, so look ...
- Qualcomm 8X camera过程解析【转】
本文转载自:http://blog.csdn.net/gabbzang/article/details/19906687 http://www.01yun.com/mobile_development ...
- Linux驱动开发3——devfs udev procfs sysfs debugfs傻傻地分不清楚
Linux调试文件系统 1.1.procfs 早期的Linux内核中,内核通过procfs输出调试信息,可以在用户态通过读写procfs节点与内核进行交互,用来获取处理器.内存.设备驱动.进程等各种信 ...
- 了解SELlinux
selinux是mac: mandatory access control. 强制访问控制. 是经过了20年的mac研究基础上开发的安全子系统. 访问控制分为三种: dac: di'scretiona ...
- be of +名词 = 形容词 (词性变化) ; || it is adj. of + 人称宾格 = 人称主格 + 形容词 (人称变化)
be of +名词 = 形容词 这是一种常用的构词法 of + 名词 就等于 对应的形容词, 这也是, 扩展词汇的一种方法. 原则上你可以任意使用, 但是, 通常只是针对 那些形容词, 名词相对来说比 ...
- 【cs231n作业笔记】一：KNN分类器
安装anaconda,下载assignment作业代码 作业代码数据集等2018版基于python3.6 下载提取码4put 本课程内容参考: cs231n官方笔记地址 贺完结!CS231n官方笔记授 ...
- 测开之路一百零二：jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...