jQuery总结第四天(选择案例解析)
2013-03-21 20:17
656 查看
页面如下:
源码:
[html]
view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo04.html</title>
<meta
http-equiv="keywords"
content="keyword1,keyword2,keyword3">
<meta
http-equiv="description"
content="this is my page">
<meta
http-equiv="content-type"
content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script
type="text/javascript"
src="../js/jquery-1.9.1.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#ckbAll").click(function(){
$("input[name='fav']").attr("checked",true);
});
$("#ckbno").click(function(){
$("input[name='fav']").attr("checked",false);
});
$("#ckbrec").click(function(){
$("input[name='fav']").each(function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;//用的是Dom的属性
});
});
});
</script>
</head>
<body>
<div>
<input
type="checkbox"
name="fav"
value="看书1"
checked="checked"/>看书1
<input
type="checkbox"
name="fav"
value="看书2"
checked="checked"/>看书2
<input
type="checkbox"
name="fav"
value="看书3"
checked="checked"/>看书3
<input
type="checkbox"
name="fav"
value="看书4"
checked="checked"/>看书4
</div>
<div>
<input
type="button"
id="ckbAll"
value="全选"/><br/><br/>
<input
type="button"
id="ckbno"
value="全不选"/><br/><br/>
<input
type="button"
id="ckbrec"
value="反选"/><br/>
</div>
</body>
</html>
源码:
[html]
view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo04.html</title>
<meta
http-equiv="keywords"
content="keyword1,keyword2,keyword3">
<meta
http-equiv="description"
content="this is my page">
<meta
http-equiv="content-type"
content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script
type="text/javascript"
src="../js/jquery-1.9.1.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#ckbAll").click(function(){
$("input[name='fav']").attr("checked",true);
});
$("#ckbno").click(function(){
$("input[name='fav']").attr("checked",false);
});
$("#ckbrec").click(function(){
$("input[name='fav']").each(function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;//用的是Dom的属性
});
});
});
</script>
</head>
<body>
<div>
<input
type="checkbox"
name="fav"
value="看书1"
checked="checked"/>看书1
<input
type="checkbox"
name="fav"
value="看书2"
checked="checked"/>看书2
<input
type="checkbox"
name="fav"
value="看书3"
checked="checked"/>看书3
<input
type="checkbox"
name="fav"
value="看书4"
checked="checked"/>看书4
</div>
<div>
<input
type="button"
id="ckbAll"
value="全选"/><br/><br/>
<input
type="button"
id="ckbno"
value="全不选"/><br/><br/>
<input
type="button"
id="ckbrec"
value="反选"/><br/>
</div>
</body>
</html>
相关文章推荐
- jQuery总结第四天(选择案例解析)
- jQuery总结第四天(选择案例解析)
- JQuery入门总结(一)【DOM、选择器、方法事件】
- Jquery经典案例总结
- 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
- jquery的学习总结之元素选择、查找、过滤
- JS加强总结第三天(JS解析xml文件案例)
- JQuery入门总结(二)【选择器、方法应用】
- jQuery总结第三天(实用案例介绍)
- jQuery解析XML 详解及方法总结
- <<< Jquery查找元素、选择器使用方法总结
- 真实工作经验总结——案例解析企业选型操作步骤
- JS加强总结第三天(JS解析xml文件案例)
- jQuery总结第三天(实用案例介绍)
- JQuery 选择和过滤方法总结
- jQuery中常用的选择器、方法、插件的总结
- 真实工作经验总结——案例解析企业选型操作步骤
- JQuery 选择和过滤方法代码总结
- jQuery学习后的总结--选择器(二)
- jQuery总结第三天(实用案例介绍)