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却不是 ...
随机推荐
- mybatis中延迟加载Lazy策略
延迟加载: lazy策略原理:只有在使用查询sql返回的数据是才真正发出sql语句到数据库,否则不发出(主要用在多表的联合查询) 1.一对一延迟加载: 假设数据库中有person表和card表:其中p ...
- 又联考了一场，感觉自己好菜啊，T1没写出来，后来花了一个早上调试。QAQ。最后发现是个-1还有取模没打。。。TAT。。。难受极了！！！
简单的区间(interval) 题目描述: 样例输入: 样例1: 4 3 1 2 3 4 样例2: 4 2 4 4 7 4 样例输出: 样例1: 3 样例2: 6 提示: 时间限制:1000ms 空间 ...
- [CF535D]Tavas and Malekas 题解
题意简述 有一个空着的长度为\(n\)的字符串\(ans\),再给出一个长度为\(m\)的序列\(a\),现要在序列中每个元素\(a_i\)的位置开始都规定必须为一个给定的字符串\(s\).问字符串\ ...
- CSS的一些单位，如rem、px、em、vw、vh、vm
总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...
- Qmake: Q_OBJECT
QMake 为Qt的预编译,例:当在代码中使用 Q_OBJECT 宏,需要执行QMake操作,否则编译通不过.
- 51nod1584加权约数和
题目大意: 求: \[ \sum_{i-1}^n\sum_{j=1}^nmax(i,j)\sigma(i*j) \] 题解 对于这个\(\max\),套路的把它转化成: \[ 2*\sum_{i=1} ...
- kali的网络IP设置
进入配置文件,配置IP leafpad /etc/network/interfaces.conf 写入如下格式的内容: /etc/network/interfaces # This file desc ...
- loj#6036 编码
分析 考虑trie+2sat 每次将?=0和?=1的分别插入 插入串时将这个点的选择状态和前缀的选择状态连关系边 注意串结束时建一个新点表示当前串 最后跑2sat即可 代码 #include<b ...
- 三十五、robotframework中怎么将100转化成100.00
1.将100转化成100.00
- CGI FastCGI WSGI 解析
我们将服务端程序分为了web服务器和应用程序服务器. web服务器是用于处理HTML文件,让客户可以通过浏览器进行访问.主流的有apache,IIS,nginx,lghttpd等. 应用服务器处理业务 ...