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却不是 ...
随机推荐
- js数字每3位加一个逗号
if(typeof val ==="number"){ var str = val.toString(); ? /(\d)(?=(\d{})+\.)/g : /(\d)(?=(?: ...
- Java——抽象类
[抽象类] 抽象类中方法有定义的必要,但是没有实现的必要,因为需要子类进行重写.
- Acitiviti的查询及删除(六)
流程定义查询 查询部署的流程定义. /** * 查询流程定义信息 //act_re_procdef */ public class QueryProcessDefinition { public st ...
- [CSP-S模拟测试]:幻魔皇（数学）
题目描述 幻魔皇拉比艾尔很喜欢斐波那契树,他想找到神奇的节点对. 所谓斐波那契树,根是一个白色节点,每个白色节点都有一个黑色节点儿子,而每个黑色节点则有一个白色和一个黑色节点儿子.神奇的节点对则是指白 ...
- Xcode磁盘空间清理
http://www.iwangke.me/2013/09/09/clean-xcode-to-free-up-disk-space/#jtss-tsina 这个目录下面的文件也可以隔一段儿时间清理一 ...
- db2数据库表操作错误SQL0668N Operation not allowed for reason code "1" on table "表". SQLSTATE=57016的解决方法
错误sql Operation not allowed for reason code "1" on table "MARKET.PURE_USER".. SQ ...
- principal components analysis 主成份分析
w http://deeplearning.stanford.edu/wiki/index.php/主成份分析 主成分分析(PCA)及其在R里的实现 - jicf的日志 - 网易博客 http:// ...
- redux源码浅入浅出
运用redux有一段时间了,包括redux-thunk和redux-saga处理异步action都有一定的涉及,现在技术栈转向阿里的dva+antd,好用得不要不要的,但是需要知己知彼要对react家 ...
- All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control characters
ValueError: All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control character ...
- Elastic Search笔记
目录 1.简介 2.概念和工具使用 2.1 基本概念 2.2 使用kibana 3.操作索引和数据 2.3 索引 2.4 索引映射到文档 2.5 新增数据 2.6 修改数据 2.7 删除数据 4. 搜 ...